Методот animate во jQuery

Сите методи кои ги разгледавме во претходните лекции, се донекаде ограничени - тие го прават токму она за што се создадени. Ако ви треба повеќе контрола над анимацијата - користете го универзалниот метод animate.

Како прв параметар овој метод прифаќа објект, во кој треба да ги поставите новите вредности на CSS својствата кои сакате да ги анимирате. А како втор параметар - времето на траење на анимацијата.

Ајде да го имплементираме овој метод на следниот HTML код:

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

Нека CSS изгледа вака:

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

Ајде да направиме така што при клик на копчето елементот да се намали до следните димензии: висина - 50px, ширина - 100px:

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

Ако се наведе вредност во овој формат height: '+=50', тогаш анимацијата ќе работи вака: на тековната вредност на висината ќе се додаде 50px (во нашиот случај) и елементот ќе биде мазно анимиран до новата вредност. Ајде да погледнеме на пример:

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

Повеќе за методот animate погледнете во справочникот jQuery.

animate

Постои таква HTML структура:

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

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

Направете така што при клик на div-от со #block неговата ширина да се зголеми до 200px за време од 1100ms.

Користете ја HTML структурата од првата задача. Направете така што при секој клик на div-от со #block неговата ширина да се зголемува за 200px и секое такво зголемување да се извршува за време од 900ms.

Користете ја HTML структурата од првата задача. Направете така што при секој клик на div-от со #block неговата ширина и висина да се зголемат за 100px и секое такво зголемување да се извршува за време од 950ms.

Користете ја HTML структурата од првата задача. Направете така што при секој клик на div-от со #block, тој да се помести надесно за 100px и секое такво поместување да се извршува за време од 700ms.