jQuery .animate() Metodu

Flash'ın kullanım alanını yavaş yavaş kaplayan JavaScript ile efektif siteler, tasarımlar yapmak için çeşitli kütüphaneler kullanılmaktadır. Bu kütüphanelerden birisi de jQuery'dir. jQuery, içerisinde barındırdığı metod/fonksiyonlar sayesinde onlarca satır kod yazmak yerine birkaç satır kod ile işlevsel içerikler hazırlamamıza yardımcı olmaktadır. Bu yöntemlerden birisi de .animate() metodudur.
Öncelikle yazım şeklini belirtelim.
Çalışma Mantığı

jQuery("hedef nesne").animate({css betikleri}, süre);

şeklinde bir temel işleyiş mekanizması barındırmaktadır.

---

İlk örnekte, "İlgili nesnenin üzerine geldiğimizde 4 saniye gecikmeli olarak nesnenin genişlik değerini değiştirelim."
Örnek 1 (jQuery Betikleri)

$(document).ready(function () {
   $(".etkilenen-nesne").hover(function () {
      $(".etkilenen-nesne").animate({"width": "300px"}, 4000);
   });
});

Örnek 1 (CSS Betikleri)

.etkilenen-nesne{color:blue;font-size:24px;width:200px;height:40px;line-height:40px;}

Örnek 1 (HTML Betikleri)

<div class="etkilenen-nesne">Kutu</div>

Örnek 1 (Test Ekranı)

---

İkinci örnekte, "Butona tıkladığımızda belirlediğimiz bir nesnenin kenarlık boyutlarını 3 saniye gecikmeli olarak değiştirelim."
Örnek 2 (jQuery Betikleri)

$(document).ready(function () {
   $(".tiklanan-buton").click(function () {
      $(".etkilenen-nesne").animate({"border-width": "10px"}, 3000);
   });
});

Örnek 2 (CSS Betikleri)

.tiklanan-buton{padding:5px 10px;background-color:gray;margin-bottom:5px;cursor:pointer;}
.etkilenen-nesne{padding:5px;background-color:red;color:#fff;border:1px solid blue;}

Örnek 2 (HTML Betikleri)

<div class="tiklanan-buton">Buton</div>
<div class="etkilenen-nesne">Etkilenen Nesne</div>

Örnek 2 (Test Ekranı)