Metode animate

Metode animate ļauj izveidot animācijas efektus dažādām CSS-īpašībām. Vienīgais obligātais parametrs - objekts ar CSS-īpašībām, līdzīgs tam, ko mēs nododam metodē css. Daudzas īpašības, kurām ir neskaitliskas vērtības vai vairākas vērtības, nevar tikt animētas ar jQuery pamatfunkcionalitāti (piemēram, background-color). Tāpat ne vienmēr tiek atbalstīti saīsinātie CSS-īpašību nosaukumi, piemēram, font - tā vietā jāizmanto fontSize vai font-size. Pirms vērtībām var likt '+=' vai '-=', tādā gadījumā norādītā vērtība tiks pieskaitīta vai atņemta no īpašības pašreizējās vērtības. Tāpat skaitlisko vērtību vietā var likt show, hide vai toggle. Visus jQuery efektus, ieskaitot animate, var globāli atslēgt, izmantojot iestatījumu jQuery.fx.off = true, kas nosaka ilguma vērtību uz 0.

Sintakse

Pirmais animācijas parametrs ir objekts ar CSS-īpašībām un to vērtībām formātā atslēga: vērtība, kuras mēs vēlamies animēt. Pārējie parametri tiek uzskatīti par neobligātiem. Otrais parametrs - nosaka animācijas ilgumu milisekundēs, 400ms pēc noklusējuma. Trešais parametrs ir gluduma funkcija pārejai (pēc noklusējuma tas ir swing), un ceturtais - callback-funkcija, kas tiks palaista pēc animācijas pabeigšanas:

.animate(īpašības, [ilgums ], [gluduma funkcija ], [callback-funkcija ]);

Laiku var norādīt ne tikai milisekundēs, bet arī ar atslēgvārdiem slow (600ms) un fast (200ms), jo lielāka vērtība, jo lēnāka animācija. Otro parametru var nodot metodē dažādas opcijas, JavaScript objekta veidā, kas satur pārus atslēga: vērtība:

.animate(īpašības, opcijas);

Piemēram, iestatīsim CSS-īpašībām width un height vērtību toggle. Ilgumu uz 5000ms, gluduma funkcijas nodosim objekta veidā, platumam tā būs lineāra funkcija, bet augstumam - easeOutBounce, tāpat pēc animācijas pabeigšanas mums vienreiz izpildīsies funkcija (sk. atslēgu complete), kas aiz elementa ar #test ievietos div ar uzrakstu 'Animation complete.':

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

Zemāk tabulā norādītas objekta options īpašības un metodes un to apraksts:

Nosaukums	Apraksts
`duration`	Animācijas ilgums milisekundēs - virkne vai skaitlis. `400ms` pēc noklusējuma.
`easing`	Nosaka, kādu gluduma funkciju izmantot. `swing` pēc noklusējuma.
`queue`	Būla vērtība vai virkne. `true` pēc noklusējuma. Norāda - vai ievietot animāciju rindā. Pie vērtības `false` animācija sāksies nekavējoties. Ja parametru nodod kā virkni, tad animācija tiks ievietota rindā, ko attēlo šis parametrs. Izmantojot rindu ar pielāgotu nosaukumu, animācija nepalaisies automātiski, lai to palaistu - izmantojiet `dequeue('queuename')`.
`specialEasing`	Šeit varat nodot objektu, kurā atslēgas būs CSS-īpašības, un vērtības - atbilstošās glas gluduma funkcijas.
`step`	Funkcija, kas tiek izsaukta katrai animētajai īpašībai katram animētajam elementam. Tā ļauj modificēt `Tween` objektu, lai mainītu vērtību īpašībai pirms tās iestatīšanas. Kā parametrus pieņem pašreizējo `tween` vērtību un `Tween` objektu.
`progress`	Funkcija, kas tiek izsaukta pēc katra animācijas soļa, tikai vienu reizi katram elementam neatkarīgi no animēto īpašību skaita. Funkcija pieņem trīs parametrus `animation` (kā promise), `progress` (skaitlis no `0` līdz `1`) un `remainingMs` (atlikušo milisekunžu skaits).
`complete`	Funkcija, kas tiek izsaukta vienreiz pēc elementa animācijas pabeigšanas. Funkcija pieņem `animation` (kā promise).
`start`	Funkcija, kas tiek izsaukta, kad elementa animācija sākas. Funkcija pieņem `animation` (kā promise) un `jumpedToEnd` (Būla vērtība. Ja `true`, tad animācija automātiski pabeidzas).
`done`	Funkcija, kas tiek izsaukta, kad elementa animācija pabeidzas (tās promise ir izpildīts veiksmīgi). Funkcija pieņem `animation` (kā promise) un `jumpedToEnd` (Būla vērtība. Ja `true`, tad animācija automātiski pabeidzas).
`fail`	Funkcija, kas tiek izsaukta, kad elementa animācija pabeidzas ar kļūdu (tās promise izpildīts ar kļūdu). Funkcija pieņem `animation` (kā promise) un `jumpedToEnd` (Būla vērtība. Ja `true`, tad animācija automātiski pabeidzas).
`always`	Funkcija, kas tiek izsaukta, kad elementa animācija pabeidzas vai apstājas bez pabeigšanas (tās promise izpildīts veiksmīgi vai ar kļūdu). Funkcija pieņem `animation` (kā promise) un `jumpedToEnd` (Būla vērtība. Ja `true`, tad animācija automātiski pabeidzas).

Piemērs

Kad noklikšķina uz pogas #left, pārvietosim zaļo kvadrātu pa kreisi, bet uz pogas #right pa labi par 50px, arī iestatīsim ilgumu uz 600ms - ar komandu slow:

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

Skatiet arī

metode show,
kas vienmērīgi parāda elementus
metode stop,
kas ļauj apturēt palaisto animāciju
metode delay,
kas iestata notikumu izpildes aizkavi
īpašība jQuery.fx.off,
kas ļauj globāli atslēgt animāciju
selektors animated,
kas izvēlas elementus, kuri šobrīd tiek izmantoti animācijā