Методот animate

Методот animate овозможува создавање на анимациски ефекти за различни CSS-својства. Единственот задолжителен параметар - објект со CSS-својства, сличен на оној што го пренесуваме во методот css. Многу својства кои имаат не-нумерички вредности или неколку вредности не можат да се анимираат со основниот функционалност на jQuery (на пример background-color). Исто така, не секогаш се поддржуваат скратени имиња на CSS-својства, на пример font - наместо тоа треба да се користи fontSize или font-size. Пред вредностите може да се стави '+=' или '-=', во тој случај наведената вредност ќе се додаде или ќе се одземе од тековната вредност на својството. Исто така, наместо нумерички вредности може да се стави show, hide или toggle. Сите jQuery ефекти, вклучувајќи го и animate, можат да се оневозможат глобално, користејќи ја поставката jQuery.fx.off = true, која ја поставува вредноста на времетраењето на 0.

Синтакса

Како прв параметар на анимацијата се пренесува објект со CSS-својства и нивните вредности во формат клуч: вредност, кои сакаме да ги анимираме. Останатите параметри се сметаат за незадолжителни. Вториот параметар - ја одредува времетраењето на анимацијата во милисекунди, 400ms по стандард. Третиот параметар е функцијата за мазност на преминот (по стандард ова е swing), како и четвртиот - callback-функција, која ќе се стартува по завршувањето на анимацијата:

.animate(својства, [времетраење ], [функција за мазност ], [callback-функција ]);

Времето може да се зададе не само во милисекунди, туку и со клучни зборови slow (600ms) и fast (200ms), колку е поголема вредноста, толку е побавна анимацијата. Може како втор параметар да му се пренесат на методот различни опции, во вид на JavaScript објект, кој содржи парови клуч: вредност:

.animate(својства, options);

На пример, да ги поставиме за CSS-својствата width и height вредноста toggle. Времетраењето на 5000ms, функциите за мазност ќе ги пренесеме во вид на објект, за ширината тоа ќе биде линеарна функција, а за висината - easeOutBounce, исто така по завршувањето на анимацијата ќе се изврши еднаш функцијата (види клуч complete), која по елементот со #test ќе постави div со натпис 'Animation complete.':

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

Подолу во табелата се дадени својствата и методите на објектот options и нивниот опис:

Име	Опис
`duration`	Времетраење на анимацијата во милисекунди - стринг или број. `400ms` по стандард.
`easing`	Одредува која функција за мазност да се користи. `swing` по стандард.
`queue`	Булова вредност или стринг. `true` по стандард. Означува дали да се стави анимацијата во редот за чекање. Со вредност `false` анимацијата ќе започне веднаш. Ако параметарот се пренесе како стринг, тогаш анимацијата ќе се стави во редот за чекање, претставен со овој параметар. При користење на ред со корисничко име, анимацијата нема да започне автоматски, за да се стартува - користете `dequeue('queuename')`.
`specialEasing`	Овде можете да пренесете објект, во кој клучевите ќе бидат CSS-својства, а вредностите - соодветните нив функции за мазност.
`step`	Функција, која се повикува за секое анимирано својство на секој анимиран елемент. Таа овозможува модификација на `Tween` објектот, за да се промени вредноста на својството пред да се постави. Како параметри прифаќа тековна вредност на `tween` и `Tween` објект.
`progress`	Функција, која се повикува по секој чекор на анимацијата, само по еднаш за секој елемент независно од бројот на анимирани својства. Функцијата прифаќа три параметри `animation` (во вид на ветување), `progress` (број од `0` до `1`) и `remainingMs` (број на преостанати милисекунди).
`complete`	Функција, која се повикува еднаш по завршувањето на анимацијата на елементот. Функцијата прифаќа `animation` (во вид на ветување).
`start`	Функција, која се повикува кога анимацијата на елементот започнува. Функцијата прифаќа `animation` (во вид на ветување) и `jumpedToEnd` (Булова вредност. Ако `true`, тогаш анимацијата автоматски завршува).
`done`	Функција, која се повикува кога анимацијата на елементот завршува (нејзиното ветување е исполнето успешно). Функцијата прифаќа `animation` (во вид на ветување) и `jumpedToEnd` (Булова вредност. Ако `true`, тогаш анимацијата автоматски завршува).
`fail`	Функција, која се повикува кога анимацијата на елементот завршува со грешка (нејзиното ветување е исполнето со грешка). Функцијата прифаќа `animation` (во вид на ветување) и `jumpedToEnd` (Булова вредност. Ако `true`, тогаш анимацијата автоматски завршува).
`always`	Функција, која се повикува кога анимацијата на елементот завршува или запира без завршување (нејзиното ветување е исполнето успешно или со грешка). Функцијата прифаќа `animation` (во вид на ветување) и `jumpedToEnd` (Булова вредност. Ако `true`, тогаш анимацијата автоматски завршува).

Пример

Ајде при кликнување на копчето #left, да го поместиме зелениот квадрат налево, а на копчето #right надесно за 50px, исто така да го поставиме времетраењето на 600ms - со командата slow:

<button id="left">left</button>
<button id="right">right</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');
});

Погледнете ги и

методот show,
кој мазно ги прикажува елементите
методот stop,
кој овозможува да се запре стартуваната анимација
методот delay,
кој поставува одложување на извршувањето на настаните
својството jQuery.fx.off,
кое овозможува глобално да се оневозможи анимацијата
селекторот animated,
кој ги избира елементите, кои во даден момент се вклучени во анимација