jQuery'de animate Metodu

Önceki derslerde incelediğimiz tüm metodlar bir şekilde sınırlıydı - yaratıldıkları amacı yerine getirirler. Animasyon üzerinde daha fazla kontrol sahibi olmak istiyorsanız, evrensel animate metodunu kullanın.

Bu metod ilk parametre olarak, animasyonunu yapmak istediğiniz CSS özelliklerinin yeni değerlerini belirteceğiniz bir nesne kabul eder. İkinci parametre olarak ise - animasyonun çalışma süresini.

Şimdi bu metodu aşağıdaki HTML kodu üzerinde uygulayalım:

<button id="button">click me</button>
<div id="elem">text...</div>

CSS'nin şu şekilde olduğunu varsayalım:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}

Butona tıklandığında, elemanın aşağıdaki boyutlara küçülmesini sağlayalım: yükseklik - 50px, genişlik - 100px:

$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

Eğer değer height: '+=50' formatında belirtilirse, animasyon şu şekilde çalışır: mevcut yükseklik değerine 50px (bizim durumumuzda) eklenir ve eleman yeni değere doğru kademeli olarak animasyonlandırılır. Bir örnekle inceleyelim:

$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

animate metodu hakkında daha detaylı bilgi için jQuery referansını inceleyin.

animate

Şu şekilde bir düzen var:

<body>
	<div id="block"></div>
</body>

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

#block id'sine sahip div'e tıklandığında, genişliğinin 1100ms süresinde 200px'ye çıkmasını sağlayın.

İlk görevdeki düzeni kullanın. #block id'sine sahip div'e her tıklandığında, genişliğinin 200px artmasını ve her bir artışın 900ms sürmesini sağlayın.

İlk görevdeki düzeni kullanın. #block id'sine sahip div'e her tıklandığında, genişliğinin ve yüksekliğinin 100px artmasını ve her bir artışın 950ms sürmesini sağlayın.

İlk görevdeki düzeni kullanın. #block id'sine sahip div'e her tıklandığında, 100px sağa kaymasını ve her bir kaymanın 700ms sürmesini sağlayın.