animate Metodu

animate metodu, çeşitli CSS özellikleri için animasyon efektleri oluşturmanıza olanak tanır. Tek zorunlu parametre, css yöntemine ilettiğimiz gibi CSS özelliklerini içeren bir nesnedir. Sayısal olmayan değerlere sahip olan veya birden fazla değeri olan birçok özellik, jQuery'nin temel işlevselliği ile canlandırılamaz (örneğin background-color). Ayrıca, font gibi kısaltılmış CSS özellik adları her zaman desteklenmez - bunun yerine fontSize veya font-size kullanılmalıdır. Değerlerden önce '+=' veya '-=' konulabilir, bu durumda belirtilen değer özelliğin mevcut değerine eklenir veya çıkarılır. Ayrıca sayısal değerler yerine show, hide veya toggle konulabilir. animate dahil tüm jQuery efektleri, jQuery.fx.off = true ayarını kullanarak genel olarak devre dışı bırakılabilir, bu da süre değerini 0 olarak ayarlar.

Sözdizimi

Animasyonun ilk parametresi olarak, canlandırmak istediğimiz CSS özelliklerini ve değerlerini anahtar: değer formatında içeren bir nesne iletilir. Diğer parametreler isteğe bağlı olarak kabul edilir. İkinci parametre, animasyonun süresini milisaniye cinsinden belirler, varsayılan olarak 400ms. Üçüncü parametre geçiş için kullanılacak yumuşaklık fonksiyonudur (varsayılan olarak swing), dördüncü parametre ise animasyon tamamlandıktan sonra çalıştırılacak callback fonksiyonudur:

.animate(özellikler, [süre ], [yumuşaklık fonksiyonu ], [callback fonksiyonu ]);

Süre sadece milisaniye cinsinden değil, aynı zamanda slow (600ms) ve fast (200ms) anahtar kelimeleriyle de belirtilebilir. Değer ne kadar büyükse, animasyon o kadar yavaş olur. Metoda ikinci parametre olarak, anahtar: değer çiftlerini içeren bir JavaScript nesnesi şeklinde çeşitli seçenekler iletilir:

.animate(özellikler, seçenekler);

Örneğin, CSS özellikleri width ve height için değeri toggle olarak ayarlayalım. Süreyi 5000ms, yumuşaklık fonksiyonlarını genişlik için doğrusal, yükseklik için ise easeOutBounce olacak şekilde bir nesne olarak ilettik, ayrıca animasyon tamamlandığında (complete anahtarına bakın), #test kimliğine sahip öğeden sonra 'Animation complete.' yazısı içeren bir div yerleştiren fonksiyon bir kez çalışacak:

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Animation complete.</div>');
	}
});

Aşağıdaki tabloda, options nesnesinin özellikleri, metotları ve açıklamaları verilmiştir:

İsim	Açıklama
`duration`	Animasyonun milisaniye cinsinden süresi - string veya sayı. Varsayılan olarak `400ms`.
`easing`	Hangi yumuşaklık fonksiyonunun kullanılacağını belirtir. Varsayılan olarak `swing`.
`queue`	Boolean değeri veya string. Varsayılan olarak `true`. Animasyonun kuyruğa alınıp alınmayacağını belirtir. `false` değerinde animasyon hemen başlar. Parametre string olarak iletilirse, animasyon bu parametre tarafından temsil edilen kuyruğa alınır. Özel isme sahip bir kuyruk kullanıldığında, animasyon otomatik olarak başlamaz, başlatmak için `dequeue('kuyrukadı')` kullanın.
`specialEasing`	Burada, anahtarların CSS özellikleri, değerlerin ise onlara karşılık gelen yumuşaklık fonksiyonları olduğu bir nesne iletebilirsiniz.
`step`	Canlandırılan her öğenin her canlandırılan özelliği için çağrılan bir fonksiyon. Özellik değerinin ayarlanmasından önce değiştirilmesi için `Tween` nesnesini değiştirmenize olanak tanır. Parametre olarak mevcut `tween` değerini ve `Tween` nesnesini alır.
`progress`	Animasyonun her adımından sonra çağrılan fonksiyon, canlandırılan özellik sayısından bağımsız olarak her öğe için yalnızca bir kez çağrılır. Fonksiyon üç parametre alır: `animation` (promise olarak), `progress` (`0` ile `1` arasında bir sayı) ve `remainingMs` (kalan milisaniye sayısı).
`complete`	Öğenin animasyonu bittikten sonra bir kez çağrılan fonksiyon. Fonksiyon `animation` (promise olarak) alır.
`start`	Öğenin animasyonu başladığında çağrılan fonksiyon. Fonksiyon `animation` (promise olarak) ve `jumpedToEnd` (Boolean değer. Eğer `true` ise, animasyon otomatik olarak tamamlanır) alır.
`done`	Öğenin animasyonu bittiğinde (promise başarıyla yerine getirildiğinde) çağrılan fonksiyon. Fonksiyon `animation` (promise olarak) ve `jumpedToEnd` (Boolean değer. Eğer `true` ise, animasyon otomatik olarak tamamlanır) alır.
`fail`	Öğenin animasyonu bir hata ile sona erdiğinde (promise hata ile yerine getirildiğinde) çağrılan fonksiyon. Fonksiyon `animation` (promise olarak) ve `jumpedToEnd` (Boolean değer. Eğer `true` ise, animasyon otomatik olarak tamamlanır) alır.
`always`	Öğenin animasyonu tamamlandığında veya tamamlanmadan durdurulduğunda (promise başarıyla veya hata ile yerine getirildiğinde) çağrılan fonksiyon. Fonksiyon `animation` (promise olarak) ve `jumpedToEnd` (Boolean değer. Eğer `true` ise, animasyon otomatik olarak tamamlanır) alır.

Örnek

Hadi #left düğmesine tıklandığında, yeşil kareyi sola, #right düğmesine tıklandığında ise sağa 50px kaydıralım, ayrıca süreyi slow komutuyla 600ms olarak ayarlayalım:

<button id="left">sol</button>
<button id="right">sağ</button>
<div class="block"></div>

div {
	position: absolute;
	background-color: green;
	left: 50px;
	width: 100px;
	height: 100px;
	margin: 5px;
}

$('#right').click(function() {
	$('.block').animate({'left': '+=50px'}, 'slow');
});
	
$('#left').click(function() {
	$('.block').animate({'left': '-=50px'}, 'slow');
});

Ayrıca Bakınız

metod show,
öğeleri yumuşak bir şekilde gösterir
metod stop,
başlatılan animasyonu durdurmaya olanak tanır
metod delay,
olayların gerçekleşmesinde gecikme ayarlar
özellik jQuery.fx.off,
animasyonu genel olarak devre dışı bırakmaya olanak tanır
seçici animated,
şu anda animasyonda kullanılan öğeleri seçer