Metoda animate

Metoda animate omogućava kreiranje animacionih efekata za različita CSS-svojstva. Jedini obavezni parametar - objekat sa CSS-svojstvima, sličan onom koji prosleđujemo metodu css. Mnoga svojstva, koja imaju nenumčarske vrednosti ili nekoliko vrednosti ne mogu biti animirana osnovnim funkcionalom jQuery (na primer background-color). Takođe ne uvek su podržana skraćena imena CSS-svojstava, na primer font - umesto toga treba koristiti fontSize ili font-size. Ispred vrednosti se može postaviti '+=' ili '-=', u tom slučaju vrednost navedena dalje će biti dodata ili oduzeta od trenutne vrednosti svojstva. Takođe umesto numeričkih vrednosti može se postaviti show, hide ili toggle. Svi jQuery efekti, uključujući animate, mogu se isključiti globalno, koristeći podešavanje jQuery.fx.off = true, koja postavlja vrednost trajanja na 0.

Sintaksa

Prvim parametrom animacije prosleđuje se objekat sa CSS-svojstvima i njihovim vrednostima u formatu ključ: vrednost, koje nameravamo animirati. Ostali parametri se smatraju neobaveznim. Drugi parametar - određuje trajanje animacije u milisekundama, 400ms podrazumevano. Trećim parametrom funkciju glatkoće za prelaz (podrazumevano je swing), a takođe četvrtim - callback-funkcija, koja će se pokrenuti nakon izvršavanja animacije:

.animate(svojstva, [trajanje ], [funkcija glatkoće ], [callback-funkcija ]);

Vreme se može zadavati ne samo u milisekundama, već i ključnim rečima slow (600ms) i fast (200ms), što je veća vrednost, to je sporija animacija. Može se drugim parametrom proslediti metodu različite opcije, u vidu JavaScript objekta, koji sadrži parove ključ: vrednost:

.animate(svojstva, options);

Na primer, postavimo za CSS-svojstva width i height vrednost toggle. Trajanje na 5000ms, funkciji glatkoće prosledimo u vidu objekta, za širinu će to biti linearna funkcija, a za visinu - easeOutBounce, takođe po završetku animacije će nam jednom izvršiti funkcija (vidite ključ complete), koja nakon elementa sa #test smešta div sa natpisom 'Animation complete.':

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

Ispod u tabeli su navedena svojstva i metode objekta options i njihov opis:

Naziv	Opis
`duration`	Trajanje animacije u milisekundama - string ili broj. `400ms` podrazumevano.
`easing`	Određuje koju funkciju glatkoće koristiti. `swing` podrazumevano.
`queue`	Bulova vrednost ili string. `true` po uobičajenom. Označava - postaviti li animaciju u red. Pri vrednosti `false` animacija će početi neodložno. Ako se parametar prosledi stringom, onda će animacija biti postavljena u red, predstavljen ovim parametrom. Pri korišćenju reda sa korisničkim imenom, animacija se neće pokrenuti automatski, da bi se pokrenula - koristite `dequeue('queuename')`.
`specialEasing`	Ovde možete proslediti objekat, u kome će ključevi biti CSS-svojstva, a vrednostima - odgovarajuće im funkcije glatkoće.
`step`	Funkcija, koja se poziva za svako animirano svojstvo svakog animiranog elementa. Ona omogućava modifikaciju `Tween` objekta, da bi se promenila vrednost svojstva pre nego što se postavi. Kao parametre prima trenutnu vrednost `tween` i `Tween` objekat.
`progress`	Funkcija, pozvana nakon svakog koraka animacije, samo po jedan put na svaki element nezavisno od broja animiranih svojstava. Funkcija prima tri parametra `animation` (u vidu promisa), `progress` (broj od `0` do `1`) i `remainingMs` (broj preostalih milisekundi).
`complete`	Funkcija, pozvana jedan put nakon završetka animacije elementa. Funkcija prima `animation` (u vidu promisa).
`start`	Funkcija, koja se poziva, kada animacija elementa počinje. Funkcija prima `animation` (u vidu promisa) i `jumpedToEnd` (Bulova vrednost. Ako je `true`, onda se animacija automatski završava).
`done`	Funkcija, koja se poziva, kada animacija elementa završava (njen promis je izvršen uspešno). Funkcija prima `animation` (u vidu promisa) i `jumpedToEnd` (Bulova vrednost. Ako je `true`, onda se animacija automatski završava).
`fail`	Funkcija, koja se poziva, kada animacija elementa završava greškom (njen promis je izvršen greškom). Funkcija prima `animation` (u vidu promisa) i `jumpedToEnd` (Bulova vrednost. Ako je `true`, onda se animacija automatski završava).
`always`	Funkcija, koja se poziva, kada animacija elementa se završava ili zaustavlja bez završetka (njen promis je izvršen uspešno ili sa greškom). Funkcija prima `animation` (u vidu promisa) i `jumpedToEnd` (Bulova vrednost. Ako je `true`, onda se animacija automatski završava).

Primer

Hajde da pri pritisku na dugme #left, pomeramo zeleni kvadrat ulevo, a na dugme #right udesno za 50px, takođe postavimo trajanje na 600ms - komandom 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');
});

Pogledajte takođe

metoda show,
koja glatko prikazuje elemente
metoda stop,
koja omogućava zaustavljanje pokrenute animacije
metoda delay,
koja postavlja kašnjenje izvršavanja događaja
svojstvo jQuery.fx.off,
koje omogućava globalno isključivanje animacije
selektor animated,
koji bira elemente, koji su u ovaj trenutak angažovani u animaciji