Az animate metódus

A animate metódus lehetővé teszi animációs hatások létrehozását különböző CSS-tulajdonságokhoz. Az egyetlen kötelező paraméter - egy objektum CSS-tulajdonságokkal, hasonlóan ahhoz, amit a css metódusnak adunk át. Számos olyan tulajdonság, amely nem számértékű vagy több értékkel rendelkezik, nem animálható a jQuery alapfunkcióival (például a background-color). A rövidített CSS-tulajdonságnevek sem mindig támogatottak, például font - ehelyett a fontSize vagy font-size használandó. Az értékek elé tehetünk '+=' vagy '-=', ilyenkor a megadott érték hozzáadódik vagy kivonódik a tulajdonság aktuális értékéből. Számértékek helyett használhatunk show, hide vagy toggle értékeket is. Minden jQuery hatás, beleértve a animate-t is, globálisan kikapcsolható a jQuery.fx.off = true beállítással, ami az animáció időtartamát 0-ra állítja.

Szintaxis

Az animáció első paramétereként egy objektumot adunk át CSS-tulajdonságokkal és értékeikkel a kulcs: érték formátumban, amelyeket animálni szeretnénk. A többi paraméter opcionális. A második paraméter meghatározza az animáció időtartamát milliszekundumban, alapértelmezetten 400ms. A harmadik paraméter az átmenet gyorsasági függvénye (alapértelmezetten swing), a negyedik pedig egy callback függvény, amely az animáció befejezése után fut le:

.animate(tulajdonságok, [időtartam ], [gyorsasági függvény ], [callback függvény ]);

Az időt nem csak milliszekundumban lehet megadni, hanem kulcsszavakkal is: slow (600ms) és fast (200ms), minél nagyobb az érték, annál lassabb az animáció. A metódusnak második paraméterként különböző beállításokat is átadhatunk, JavaScript objektum formájában, amely kulcs: érték párokat tartalmaz:

.animate(tulajdonságok, options);

Például állítsuk be a width és height CSS-tulajdonságok értékét toggle-ra. Az időtartam legyen 5000ms, a gyorsasági függvényeket objektumként adjuk át, a szélesség esetén lineáris függvény lesz, a magasságnál pedig easeOutBounce, továbbá az animáció befejezésekor egyszer lefut egy függvény (lásd a complete kulcsot), amely a #test azonosítójú elem után elhelyez egy div-et a 'Animation complete.' felirattal:

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

Az alábbi táblázatban a options objektum tulajdonságai és metódusai, valamint azok leírása található:

Név	Leírás
`duration`	Az animáció időtartama milliszekundumban - szöveg vagy szám. Alapértelmezetten `400ms`.
`easing`	Meghatározza, melyik gyorsasági függvényt használja. Alapértelmezetten `swing`.
`queue`	Logikai érték vagy szöveg. Alapértelmezetten `true`. Meghatározza, hogy várólistára kerüljön-e az animáció. `false` érték esetén az animáció azonnal elindul. Ha a paraméter szöveg, akkor az animáció abba a várólistába kerül, amelyet e paraméter képvisel. Egyéni névvel rendelkező várólista használata esetén az animáció nem indul el automatikusan, az elindításhoz használd a `dequeue('queuename')` metódust.
`specialEasing`	Itt adhatsz át egy objektumot, amelyben a kulcsok CSS-tulajdonságok, az értékek pedig a hozzájuk tartozó gyorsasági függvények.
`step`	Egy függvény, amely minden animált tulajdonságra meghívódik minden animált elem esetén. Lehetővé teszi a `Tween` objektum módosítását, hogy megváltoztassa a tulajdonság értékét, mielőtt az beállításra kerülne. Paraméterként fogadja a `tween` aktuális értékét és a `Tween` objektumot.
`progress`	Egy függvény, amely az animáció minden lépése után meghívódik, de csak egyszer minden elemre, függetlenül az animált tulajdonságok számától. A függvény három paramétert fogad: `animation` (promise-ként), `progress` (`0` és `1` közötti szám) és `remainingMs` (a hátralévő milliszekundumok száma).
`complete`	Egy függvény, amely egyszer hívódik meg az elem animációjának befejezése után. A függvény egy `animation` (promise-ként) paramétert fogad.
`start`	Egy függvény, amely akkor hívódik meg, amikor az elem animációja elindul. A függvény egy `animation` (promise-ként) és egy `jumpedToEnd` (Logikai érték. Ha `true`, akkor az animáció automatikusan befejeződik) paramétert fogad.
`done`	Egy függvény, amely akkor hívódik meg, amikor az elem animációja véget ér (a promise sikeresen teljesült). A függvény egy `animation` (promise-ként) és egy `jumpedToEnd` (Logikai érték. Ha `true`, akkor az animáció automatikusan befejeződik) paramétert fogad.
`fail`	Egy függvény, amely akkor hívódik meg, amikor az elem animációja hibával ér véget (a promise hibával teljesült). A függvény egy `animation` (promise-ként) és egy `jumpedToEnd` (Logikai érték. Ha `true`, akkor az animáció automatikusan befejeződik) paramétert fogad.
`always`	Egy függvény, amely akkor hívódik meg, amikor az elem animációja befejeződik vagy megáll befejezés nélkül (a promise sikeresen vagy hibával teljesült). A függvény egy `animation` (promise-ként) és egy `jumpedToEnd` (Logikai érték. Ha `true`, akkor az animáció automatikusan befejeződik) paramétert fogad.

Példa

A #left gomb megnyomására tegyük a zöld négyzetet balra, a #right gombra pedig jobbra 50px-rel, az időtartamot pedig állítsuk 600ms-ra - a slow paranccsal:

<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');
});

Lásd még

a show metódus,
amely simán megjeleníti az elemeket
a stop metódus,
amely megállítja a futó animációt
a delay metódus,
amely késlelteti az események végrehajtását
a jQuery.fx.off tulajdonság,
amely globálisan letiltja az animációt
a animated szelektor,
amely kiválasztja azokat az elemeket, amelyek jelenleg animációban vesznek részt