Metodas animate

Metodas animate leidžia kurti animacinius efektus įvairioms CSS savybėms. Vienintelis privalomas parametras - objektas su CSS savybėmis, panašus į tą, kurį perduodame į metodą css. Daugelis savybių, turinčių ne skaitines reikšmes ar kelias reikšmes, negali būti animuojamos pagrindine jQuery funkcija (pavyzdžiui background-color). Taip pat ne visada palaikomi sutrumpinti CSS savybių pavadinimai, pavyzdžiui font - vietoj to reikia naudoti fontSize arba font-size. Prieš reikšmes galima įdėti '+=' arba '-=', tokiu atveju nurodyta reikšmė bus pridėta arba atimta iš dabartinės savybės reikšmės. Taip pat vietoj skaitinių reikšmių galima nustatyti show, hide arba toggle. Visus jQuery efektus, įskaitant animate, galima išjungti globaliai, naudojant nustatymą jQuery.fx.off = true, kuris nustato trukmės reikšmę į 0.

Sintaksė

Pirmuoju animacijos parametru perduodamas objektas su CSS savybėmis ir jų reikšmėmis formatu raktas: reikšmė, kurias ketiname animuoti. Likę parametrai laikomi neprivalomais. Antrasis parametras - nustato animacijos trukmę milisekundėmis, 400ms pagal nutylėjimą. Trečiuoju parametru perduodama sklandaus judėjimo funkcija perėjimui (pagal nutylėjimą tai swing), o ketvirtuoju - callback funkcija, kuri paleidžiama po animacijos vykdymo:

.animate(savybės, [trukmė ], [sklandumo funkcija ], [callback funkcija ]);

Laiką galima nurodyti ne tik milisekundėmis, bet ir raktažodžiais slow (600ms) ir fast (200ms), kuo didesnė reikšmė, tuo lėtesnė animacija. Galima antruoju parametru perduoti metodu įvairias opcijas, JavaScript objekto pavidalu, kuriame yra poros raktas: reikšmė:

.animate(savybės, options);

Pavyzdžiui, nustatykime CSS savybėms width ir height reikšmę toggle. Trukmę nustatykime 5000ms, sklandumo funkcijas perduosime kaip objektą, plotiui tai bus linijinė funkcija, o aukščiui - easeOutBounce, taip pat baigus animaciją vieną kartą bus vykdyta funkcija (žr. raktą complete), kuri po elemento su #test patalpins div su užrašu 'Animation complete.':

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

Žemiau lentelėje pateikiamos savybės ir metodai objekto options ir jų aprašymas:

Pavadinimas	Aprašymas
`duration`	Animacijos trukmė milisekundėmis - eilutė arba skaičius. `400ms` pagal nutylėjimą.
`easing`	Nustato kurią sklandumo funkciją naudoti. `swing` pagal nutylėjimą.
`queue`	Būlio reikšmė arba eilutė. `true` pagal nutylėjimą. Nurodo - ar dėti animaciją į eilę. Kai reikšmė `false` animacija prasidės nedelsiant. Jei parametras perduodamas eilute, tada animacija bus dedama į eilę, kurią atstovauja šis parametras. Kai naudojama eilė su pasirinktiniu pavadinimu, animacija nepradės veikti automatiškai, kad ją paleisti - naudokite `dequeue('queuename')`.
`specialEasing`	Čia galite perduoti objektą, kuriame raktai bus CSS savybės, o reikšmės - atitinkamos sklandumo funkcijos.
`step`	Funkcija, kuri iškviečiama kiekvienai animuojamai savybei kiekviename animuojamame elemente. Ji leidžia modifikuoti `Tween` objektą, kad pakeistų reikšmę savybės prieš tai, kai ji nustatoma. Kaip parametrus priima dabartinę `tween` reikšmę ir `Tween` objektą.
`progress`	Funkcija, iškviečiama po kiekvieno animacijos žingsnio, tik vieną kartą kiekvienam elementui nepriklausomai nuo animuotų savybių skaičiaus. Funkcija priima tris parametrus `animation` (kaip promise), `progress` (skaičius nuo `0` iki `1`) ir `remainingMs` (likusių milisekundžių skaičius).
`complete`	Funkcija, iškviečiama vieną kartą po elemento animacijos pabaigos. Funkcija priima `animation` (kaip promise).
`start`	Funkcija, kuri iškviečiama, kai elemento animacija prasideda. Funkcija priima `animation` (kaip promise) ir `jumpedToEnd` (Būlio reikšmė. Jei `true`, tada animacija automatiškai baigiama).
`done`	Funkcija, kuri iškviečiama, kai elemento animacija baigiasi (jos promise įvykdyta sėkmingai). Funkcija priima `animation` (kaip promise) ir `jumpedToEnd` (Būlio reikšmė. Jei `true`, tada animacija automatiškai baigiama).
`fail`	Funkcija, kuri iškviečiama, kai elemento animacija baigiasi klaida (jos promise įvykdyta su klaida). Funkcija priima `animation` (kaip promise) ir `jumpedToEnd` (Būlio reikšmė. Jei `true`, tada animacija automatiškai baigiama).
`always`	Funkcija, kuri iškviečiama, kai elemento animacija baigiasi arba sustabdoma nebaigus (jos promise įvykdyta sėkmingai arba su klaida). Funkcija priima `animation` (kaip promise) ir `jumpedToEnd` (Būlio reikšmė. Jei `true`, tada animacija automatiškai baigiama).

Pavyzdys

Spustelėjus mygtuką #left, pastumkime žalią kvadratą į kairę, o mygtuką #right į dešinę 50px, taip pat nustatykime trukmę į 600ms - komanda slow:

<button id="left">kairė</button>
<button id="right">dešinė</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');
});

Taip pat žiūrėkite

metodas show,
kuris sklandžiai rodo elementus
metodas stop,
kuris leidžia sustabdyti paleistą animaciją
metodas delay,
kuris nustato įvykių vykdymo vėlavimą
savybė jQuery.fx.off,
kuri leidžia globaliai išjungti animaciją
selektorius animated,
kuris pasirenka elementus, kurie šiuo momentu dalyvauja animacijoje