Метод 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(properties, [duration ], [easing ], [callback ]);

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

.animate(properties, options);

На пример, поставимо за CSS-својства width и height вредност toggle. Трајање на 5000ms, функције еасинга проследимо у виду објекта, за ширину то ће бити линеарна функција, а за висину - easeOutBounce, такође по завршетку анимације ће се једном извршити функција (види кључ complete), која после елемента са #test поставиће див са натписом '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,
који бира елементе, који су тренутно укључени у анимацију