JQuery Animasyon 2 Veysel Uğur KIZMAZ Javascript 19.10.2011 00:41:15 Hit : 467 jQuery ile animasyon işlemlerine devam edelim. Bu uygulamamızda resmimizi animasyonla büyütüp küçültelim. <html> <head> <title>jQuery & CSS</title> <script src="jquery-1.5.1.js"></script> <script type="text/javascript"> var buyukMu = false; $(document).ready(function(){ $("#btResimAnimasyon").click(function(){ $("#imgResim").slideToggle('fast'); if(buyukMu){ $("#btResimAnimasyon").text("Küçült"); } else{ $("#btResimAnimasyon").text("Büyüt"); } buyukMu = !buyukMu; }); }); </script> </head> <body> <button id="btResimAnimasyon">Küçült</button> <hr/> <img src="resim.jpg" id="imgResim"/> <hr/> </body> </html> 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. $(“#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ı. $(“#btResimAnimasyon”).text(“Büyüt”); fonksiyonu ile “btResimAnimasyon” isimli butonun text özelliğini değiştirir. » » » »
