Jquery animate nasıl kullanılır?

Jquery ile animasyon (animate) nasıl yapılır ?

Jquery animate bir jquery metodudur. Jquery animate metodu ile HTML etiketlerinin CSS özelliklerini zamana bağlı olarak rahatlıkla değiştirebilmenize olanak sağlayan bir metoddur.

Jquery animate metodu 4 kısımdan oluşmaktadır:

.animate(özellikler, [süre(duration)], [görsellik(easing)], [tamamlandığında yapılacaklar(complete)]);

Özellikler: Animasyon ile değişecek olan CSS özellikleri (renk, genişlik, yükseklik, font boyutu v.b.)
Süre (duration): Animasyon süresini belirler. Süre milisaniye cinsinden girilir. 1 Saniye için 1000 yazılır.
Görsellik (easing): animasyon esnasında hangi görsel fonksiyonun kullanılacağı belirtilir.
Tamamlandığında Yapılacaklar (complete): Animasyon tamamlandığında yapılacak olanlar bir fonksiyon içerisinde belirtilir.

Kullanımı ile ilgili bir örnek vermek gerekirse:

ID'si animasyon olan bir DIV etiketimiz olsun ve bu etiketin width değerinin animasyon sonunda 250px height değerinin ise 500px olmasını istediğimizi varsayalım. Animasyonun 3 sn. içinde bitmesini istiyoruz. Width değerinin görsellik efekti easeInSine ve height değerinin görsellik efekti easeInExpo olsun. Animasyon tamamlandığında ise "Animasyon Tamamlandı" şeklinde bir mesaj versin.

$('#animasyon').animate({
width: '250px',
height: '500px'
}, {
duration: 3000,
specialEasing: {
width: 'easelnSine',
height: 'easelnExpo'
},
complete: function() {
alert('Animasyon Tamamlandı');
}
});

Aşağıdaki görselleştirme efektlerini (easing) kullanarak çeşitli animasyonlar oluşturabilirsiniz.

jswing
def
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce