Metoda animate

Metoda animate omogoča ustvarjanje animacijskih efektov za različne CSS-lastnosti. Edini obvezen parameter - objekt s CSS-lastnostmi, podoben tistemu, ki ga posredujemo metodi css. Številne lastnosti, ki imajo neštevilske vrednosti ali več vrednosti, ni mogoče animirati z osnovno funkcionalnostjo jQuery (na primer background-color). Tudi ne vedno so podprta skrajšana imena CSS-lastnosti, na primer font - namesto tega je treba uporabiti fontSize ali font-size. Pred vrednostmi lahko postavimo '+=' ali '-=', v tem primeru bo navedena vrednost prišteta ali odšteta od trenutne vrednosti lastnosti. Namesto številskih vrednosti lahko tudi postavimo show, hide ali toggle. Vse jQuery učinke, vključno z animate, je mogoče onemogočiti globalno z uporabo nastavitve jQuery.fx.off = true, ki nastavi vrednost trajanja na 0.

Sintaksa

Prvi parameter animacije je objekt s CSS-lastnostmi in njihovimi vrednostmi v formatu ključ: vrednost, ki jih želimo animirati. Preostali parametri veljajo za neobvezne. Drugi parameter - določa trajanje animacije v milisekundah, 400ms privzeto. Tretji parameter funkcijo gladkosti za prehod (privzeto je swing), in četrti - callback-funkcijo, ki se bo zagnala po izvedbi animacije:

.animate(lastnosti, [trajanje ], [funkcija gladkosti ], [callback-funkcija ]);

Čas lahko določimo ne le v milisekundah, ampak tudi s ključnimi besedami slow (600ms) in fast (200ms), večja kot je vrednost, počasnejša je animacija. Lahko drugi parameter posredujemo metodi različne opcije, v obliki JavaScript objekta, ki vsebuje pare ključ: vrednost:

.animate(lastnosti, options);

Na primer, nastavimo za CSS-lastnosti width in height vrednost toggle. Trajanje na 5000ms, funkciji gladkosti posredujemo v obliki objekta, za širino bo to linearna funkcija, za višino pa - easeOutBounce, tudi po zaključku animacije se bo enkrat izvedla funkcija (glej ključ complete), ki bo za elementom z #test postavila div z napisom 'Animation complete.':

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

Spodaj v tabeli so navedene lastnosti in metode objekta options in njihov opis:

Ime	Opis
`duration`	Trajanje animacije v milisekundah - niz ali število. `400ms` privzeto.
`easing`	Določa katero funkcijo gladkosti uporabiti. `swing` privzeto.
`queue`	Logična vrednost ali niz. `true` po privzetem. Določa - ali naj animacija stoji v čakalni vrsti. Pri vrednosti `false` se bo animacija začela takoj. Če parameter posredujemo kot niz, bo animacija postavljena v čakalno vrsto, ki jo predstavlja ta parameter. Pri uporabi čakalne vrste z uporabniškim imenom, animacija ne bo začela samodejno, da jo zaženemo - uporabite `dequeue('queuename')`.
`specialEasing`	Tukaj lahko posredujete objekt, v katerem so ključi CSS-lastnosti, vrednosti pa - ustrezne funkcije gladkosti.
`step`	Funkcija, ki se pokliče za vsako animirano lastnost vsakega animiranega elementa. Omogoča modificiranje `Tween` objekta, da spremenimo vrednost lastnosti preden je nastavljena. Kot parametra sprejme trenutno vrednost `tween` in `Tween` objekt.
`progress`	Funkcija, ki se pokliče po vsakem koraku animacije, samo enkrat za vsak element neodvisno od števila animiranih lastnosti. Funkcija sprejme tri parametre `animation` (v obliki promisa), `progress` (število od `0` do `1`) in `remainingMs` (število preostalih milisekund).
`complete`	Funkcija, ki se pokliče enkrat po koncu animacije elementa. Funkcija sprejme `animation` (v obliki promisa).
`start`	Funkcija, ki se pokliče, ko se animacija elementa začne. Funkcija sprejme `animation` (v obliki promisa) in `jumpedToEnd` (Logična vrednost. Če je `true`, potem se animacija samodejno zaključi).
`done`	Funkcija, ki se pokliče, ko se animacija elementa konča (njen promis je uspešno izpolnjen ). Funkcija sprejme `animation` (v obliki promisa) in `jumpedToEnd` (Logična vrednost. Če je `true`, potem se animacija samodejno zaključi).
`fail`	Funkcija, ki se pokliče, ko se animacija elementa konča z napako (njen promis je izpolnjen z napako). Funkcija sprejme `animation` (v obliki promisa) in `jumpedToEnd` (Logična vrednost. Če je `true`, potem se animacija samodejno zaključi).
`always`	Funkcija, ki se pokliče, ko se animacija elementa konča ali ustavi brez zaključka (njen promis je izpolnjen uspešno ali z napako). Funkcija sprejme `animation` (v obliki promisa) in `jumpedToEnd` (Logična vrednost. Če je `true`, potem se animacija samodejno zaključi).

Primer

Pritisnemo na gumb #left, bomo premaknili zeleni kvadrat levo, na gumb #right desno za 50px, prav tako nastavimo trajanje na 600ms - z ukazom 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');
});

Glejte tudi

metoda show,
ki gladko prikaže elemente
metoda stop,
ki omogoča ustavitev zagnane animacije
metoda delay,
ki nastavi zamudo izvedbe dogodkov
lastnost jQuery.fx.off,
ki omogoča globalno onemogočanje animacije
selektor animated,
ki izbere elemente, ki so trenutno vključeni v animacijo