Meetod animate

Meetod animate võimaldab luua animeerimisefekte erinevatele CSS-omadustele. Ainus kohustuslik parameeter - objekt CSS-omadustega, sarnaselt sellele, mida me edastame meetodisse css. Paljud omadused, millel on mittenumbrilised väärtused või mitu väärtust, ei saa olla animeeritud jQuery põhifunktsionaalsusega (näiteks background-color). Samuti ei toetata alati lühendatud CSS-omaduste nimetusi, näiteks font - selle asemel tuleb kasutada fontSize või font-size. Väärtuste ette saab panna '+=' või '-=', sel juhul lisatakse või lahutatakse järgnev väärtus omaduse praegusest väärtusest. Samuti saab numbrite asemel panna show, hide või toggle. Kõiki jQuery efekte, sealhulgas animate, saab globaalselt keelata, kasutades seadistust jQuery.fx.off = true, mis määrab kestuse väärtuseks 0.

Süntaks

Esimese animatsiooni parameetrina edastatakse objekt CSS-omadustega ja nende väärtustega vormingus võti: väärtus, mida kavatseme animeerida. Ülejäänud parameetreid peetakse valikulisteks. Teine parameeter määratleb animatsiooni kestuse millisekundites, 400ms vaikimisi. Kolmas parameeter on sujuvusfunktsioon üleminekuks (vaikimisi on see swing), ning neljas - callback-funktsioon, mis käivitub pärast animatsiooni lõpetamist:

.animate(omadused, [kestus ], [sujuvusfunktsioon ], [callback-funktsioon ]);

Aega saab määrata mitte ainult millisekundites, vaid ka võtmesõnadega slow (600ms) ja fast (200ms), mida suurem väärtus, seda aeglasem animatsioon. Teise parameetrina saab meetodile edastada erinevaid valikuid, JavaScripti objekti kujul, mis sisaldab paare võti: väärtus:

.animate(omadused, valikud);

Näiteks määrame CSS-omadustele width ja height väärtuseks toggle. Kestuseks 5000ms, sujuvusfunktsioonid edastame objekti kujul, laiuse jaoks on see lineaarne funktsioon, ja kõrguse jaoks - easeOutBounce, samuti animatsiooni lõppedes käivitub meil üks kord funktsioon (vt võtit complete), mis pärast elementi #test asetab divi pealkirjaga 'Animation complete.':

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

Allpool tabelis on toodud objekti options omadused ja meetodid ning nende kirjeldus:

Nimi	Kirjeldus
`duration`	Animatsiooni kestus millisekundites - string või number. `400ms` vaikimisi.
`easing`	Määrab, millist sujuvusfunktsiooni kasutada. `swing` vaikimisi.
`queue`	Tõeväärtus või string. `true` vaikimisi. Näitab - kas panna animatsioon järjekorda. Väärtusel `false` algab animatsioon kohe. Kui parameeter edastatakse stringina, siis pannakse animatsioon järjekorda, mida see parameeter esindab. Kui kasutatakse järjekorda kohandatud nimega, animatsioon ei käivitu automaatselt, selle käivitamiseks - kasutage `dequeue('queuename')`.
`specialEasing`	Siin saate edastada objekti, mille võtmeteks on CSS-omadused ja väärtusteks - vastavad sujuvusfunktsioonid.
`step`	Funktsioon, mida kutsutakse välja iga animeeritud omaduse kohta iga animeeritud elemendi jaoks. See võimaldab muuta `Tween` objekti, et muuta omaduse väärtust enne kui see määratakse. Parameetritena võtab vastu praeguse `tween` väärtuse ja `Tween` objekti.
`progress`	Funktsioon, mida kutsutakse välja pärast iga animatsiooni sammu, ainult üks kord igale elemendile sõltumata animeeritud omaduste arvust. Funktsioon võtab vastu kolm parameetrit `animation` (promise kujul), `progress` (number `0` kuni `1`) ja `remainingMs` (allesjäänud millisekundite arv).
`complete`	Funktsioon, mida kutsutakse välja üks kord pärast elemendi animatsiooni lõppu. Funktsioon võtab vastu `animation` (promise kujul).
`start`	Funktsioon, mida kutsutakse välja, kui elemendi animatsioon algab. Funktsioon võtab vastu `animation` (promise kujul) ja `jumpedToEnd` (Tõeväärtus. Kui `true`, siis animatsioon lõpetatakse automaatselt).
`done`	Funktsioon, mida kutsutakse välja, kui elemendi animatsioon lõpeb (selle promise on täidetud edukalt). Funktsioon võtab vastu `animation` (promise kujul) ja `jumpedToEnd` (Tõeväärtus. Kui `true`, siis animatsioon lõpetatakse automaatselt).
`fail`	Funktsioon, mida kutsutakse välja, kui elemendi animatsioon lõpeb veaga (selle promise täidetud veaga). Funktsioon võtab vastu `animation` (promise kujul) ja `jumpedToEnd` (Tõeväärtus. Kui `true`, siis animatsioon lõpetatakse automaatselt).
`always`	Funktsioon, mida kutsutakse välja, kui elemendi animatsioon lõpeb või peatub ilma lõpetamiseta (selle promise on täidetud edukalt või veaga). Funktsioon võtab vastu `animation` (promise kujul) ja `jumpedToEnd` (Tõeväärtus. Kui `true`, siis animatsioon lõpetatakse automaatselt).

Näide

Vajutamisel nupule #left, liigutame rohelise ruudu vasakule, ja nupule #right paremale 50px võrra, samuti määrame kestuse 600ms - käsuga slow:

<button id="left">vasakule</button>
<button id="right">paremale</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');
});

Vaata ka

meetod show,
mis sujuvalt näitab elemente
meetod stop,
mis võimaldab peatada käivitatud animatsiooni
meetod delay,
mis määrab sündmuste täitmise viivituse
omadus jQuery.fx.off,
mis võimaldab globaalselt animatsiooni keelata
selektor animated,
mis valib elemendid, mis on praegusel hetkel animatsioonis kasutusel