"/>"/>
Yazılım Dilleri
Asp.Net 4.5 Kitabı
Skip Navigation Links

jQuery ile Animasyon 2

jQuery'nin slideToggle fonksiyonunu kullanarak resim animasyonlu büyütme-küçültme işlemini inceleyelim.

 jQuery ile animasyon işlemlerine devam edelim.

 
Bu uygulamamızda resmimizi animasyonla büyütüp küçültelim.
 
 
  1. <html>
  2.             <head>
  3.                         <title>jQuery & CSS</title>
  4.                         <script src="jquery-1.5.1.js"></script>
  5.                         <script type="text/javascript">
  6.                                    var buyukMu = false;
  7.                                    $(document).ready(function(){
  8.                                                $("#btResimAnimasyon").click(function(){
  9.                                                            $("#imgResim").slideToggle('fast');
  10.                                                            if(buyukMu){
  11.                                                                        $("#btResimAnimasyon").text("Küçült");
  12.                                                            }
  13.                                                            else{
  14.                                                                        $("#btResimAnimasyon").text("Büyüt");
  15.                                                            }
  16.                                                            buyukMu = !buyukMu;
  17.                                                });
  18.                                    });
  19.                         </script>
  20.             </head>
  21.             <body>
  22.                         <button id="btResimAnimasyon">Küçült</button>
  23.                         <hr/>
  24.                         <img src="resim.jpg" id="imgResim"/>
  25.                         <hr/>
  26.             </body>
  27. </html>

  

  1. buyukMu değişkeninde resmimizin büyük mü küçük mü olduğu bilgisi tutulmaktadır. Bu bilgiye göre butonun text’i değişmektedir.
  2. $(“#imgResim”).slideToggle(‘fast’); fonksiyonu ile imgResim isimli resim elemanı hızlı bir animasyonla küçülüp kaybolur. “fast” yerine “slow” deseydik yavaş bir animsyonla küçülüp kaybolacaktı.
  3. $(“#btResimAnimasyon”).text(“Büyüt”); fonksiyonu ile “btResimAnimasyon” isimli butonun text özelliğini değiştirir.

 

Veysel Uğur KIZMAZ

Bilgisayar Mühendisi

veysel@ugurkizmaz.com

Yorumlar (0)

Yorum Yap

Mail listesine katılmak için tıklayınız

Hakkımdaki son bilgilere anlık erişmek için mail listesine katılabilirsiniz.