jQuery animation kullanımı

Geçen yazıda jQuery ile .css() nasıl kullanılır, ne işe yarar, nerelerde kullanılır gibi yerlere değinmiştik birde örnek olarak div'imizin genişliğini ve rengini değiştirmiştik ama gel gelelim bana tabiri caizse çok odunumsu geldi bastığımız an pat diye rengi değişiyor, büyüyor yada küçülüyor.

Bunlara daha estetik bir görüntü sağlamak için, animasyonla büyüyüp küçülmesi yada renginin değişmesi için .animation() fonksiyonu kullanılır.

Hemen geçen seferki örnek üstünden devam edelim herhangi birşey değiştirmeyelim.

Html kodlarımız:

<a href="#" id="tik">Tıkla</a>

<div id="kare"></div>

jQuery kodlarımız.

<script>

    $(document).ready(function(){

  $("#tik").click(function(){

   $("#kare").animate({

    "background-color":"#000"

    },1000)

   return false;

  });

    });

</script>

şimdi jQuery kodlarımızı açıklayalım hemen, id'si tik olana tıklandığında id'si kare olanın arkaplan rengi siyah olarak değişecek.
Ee sadece tek bir özellik mi verebiliriz ? tabiki hayır aynı anda 5 10 tane özellik değiştirmek için virgül koyup istediğimiz özellik yazılır örnek vermek gerekirse.

$("#kare").animate({

 "background-color":"#000",

 "width":"200px",

 "margin-left":"50px"

},1000);

bunları öğrendik, hoş güzel ama sondaki 1000 sayısı neyi ifade ediyo ? oda animasyonumuzun ne kadar süreceğini söylüyor bize 1000 demek 1 saniye manasına geliyor ordaki değeri düşürerek yada arttırarak animasyon hızını uygun şekilde ayarlayabiliriz.

Demoyu Görmek için tıklayın.

Tabi bu fonksiyon kullanımı bu kadar mı ? tabiki hayır ama ben basit olarak anlattım, detaylarını sonraki yazılarımızda yazıcam selametle.