jQuery .animate() Metodu

JavaScript kütüphanelerinden olan jQuery ile bir nesne üzerinde animasyon işlemlerini örneklerle sizlere aktaracağız.

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ı)
Kutu

İ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ı)
Buton
Etkilenen Nesne

Yorumlar

Henüz hiçbir yorum yazılmamış. İlk yorumu siz yapın.

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

EN

  • Popüler
  • Yeni
  • Son Yorum