Metóda animate

Metóda animate umožňuje vytvárať animačné efekty pre rôzne CSS vlastnosti. Jediný povinný parameter - objekt s CSS vlastnosťami, podobný tomu, čo odovzdávame do metódy css. Mnohé vlastnosti, ktoré majú nečíselné hodnoty alebo niekoľko hodnôt nemôžu byť animované základným funkcionalom jQuery (napríklad background-color). Tiež nie vždy sú podporované skrátené názvy CSS vlastností, napríklad font - namiesto toho je potrebné použiť fontSize alebo font-size. Pred hodnotami je možné uviesť '+=' alebo '-=', v takom prípade bude uvedená hodnota pripočítaná alebo odpočítaná od aktuálnej hodnoty vlastnosti. Tiež namiesto číselných hodnôt je možné uviesť show, hide alebo toggle. Všetky jQuery efekty, vrátane animate, je možné deaktivovať globálne, pomocou nastavenia jQuery.fx.off = true, ktoré nastavuje hodnotu trvania na 0.

Syntax

Prvým parametrom animácie je odovzdaný objekt s CSS vlastnosťami a ich hodnotami vo formáte kľúč: hodnota, ktoré sa chystáme animovať. Ostatné parametre sa považujú za nepovinné. Druhý parameter - určuje trvanie animácie v milisekundách, 400ms štandardne. Tretím parametrom funkciu plynulosti pre prechod (štandardne je to swing), a ako štvrtý - callback funkcia, ktorá sa spustí po vykonaní animácie:

.animate(vlastnosti, [trvanie ], [funkcia plynulosti ], [callback funkcia ]);

Čas je možné určiť nielen v milisekundách, ale aj kľúčovými slovami slow (600ms) a fast (200ms), čím väčšia hodnota, tým pomalšia animácia. Druhým parametrom je možné metóde odovzdať rôzne možnosti, vo forme objektu JavaScript, obsahujúceho dvojice kľúč: hodnota:

.animate(vlastnosti, options);

Napríklad, nastavme pre CSS vlastnosti width a height hodnotu toggle. Trvanie na 5000ms, funkcie plynulosti odovzdáme vo forme objektu, pre šírku to bude lineárna funkcia, a pre výšku - easeOutBounce, tiež po dokončení animácie sa nám raz vykoná funkcia (pozri kľúč complete), ktorá za elementom s #test umiestni div s nápisom 'Animation complete.':

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

Nižšie v tabuľke sú uvedené vlastnosti a metódy objektu options a ich popis:

Názov	Popis
`duration`	Trvanie animácie v milisekundách - reťazec alebo číslo. `400ms` štandardne.
`easing`	Určuje akú funkciu plynulosti použiť. `swing` štandardne.
`queue`	Logická hodnota alebo reťazec. `true` štandardne. Určuje - zaradiť animáciu do frontu. Pri hodnote `false` sa animácia spustí okamžite. Ak parameter odovzdáme ako reťazec, animácia bude zaradená do frontu, ktorý tento parameter reprezentuje. Pri používaní frontu s používateľským názvom, animácia sa nespustí automaticky, na jej spustenie - použite `dequeue('queuename')`.
`specialEasing`	Tu môžete odovzdať objekt, v ktorom kľúčmi budú CSS vlastnosti, a hodnotami - im zodpovedajúce funkcie plynulosti.
`step`	Funkcia, ktorá je volaná pre každú animovanú vlastnosť každého animovaného elementu. Umožňuje modifikovať `Tween` objekt, aby sa zmenila hodnota vlastnosti pred tým, ako je nastavená. Ako parametre prijíma aktuálnu hodnotu `tween` a `Tween` objekt.
`progress`	Funkcia, volaná po každom kroku animácie, iba raz pre každý element nezávisle od počtu animovaných vlastností. Funkcia prijíma tri parametre `animation` (vo forme promisu), `progress` (číslo od `0` do `1`) a `remainingMs` (číslo zostávajúcich milisekúnd).
`complete`	Funkcia, volaná raz po skončení animácie elementu. Funkcia prijíma `animation` (vo forme promisu).
`start`	Funkcia, ktorá je volaná, keď animácia elementu začína. Funkcia prijíma `animation` (vo forme promisu) a `jumpedToEnd` (Logická hodnota. Ak `true`, potom sa animácia automaticky dokončí).
`done`	Funkcia, ktorá je volaná, keď animácia elementu končí (jej promis je splnený úspešne). Funkcia prijíma `animation` (vo forme promisu) a `jumpedToEnd` (Logická hodnota. Ak `true`, potom sa animácia automaticky dokončí).
`fail`	Funkcia, ktorá je volaná, keď animácia elementu končí s chybou (jej promis je splnený s chybou). Funkcia prijíma `animation` (vo forme promisu) a `jumpedToEnd` (Logická hodnota. Ak `true`, potom sa animácia automaticky dokončí).
`always`	Funkcia, ktorá je volaná, keď animácia elementu je dokončená alebo zastavená bez dokončenia (jej promis je splnený úspešne alebo s chybou). Funkcia prijíma `animation` (vo forme promisu) a `jumpedToEnd` (Logická hodnota. Ak `true`, potom sa animácia automaticky dokončí).

Príklad

Po kliknutí na tlačidlo #left, posunme zelený štvorec doľava, a na tlačidlo #right doprava o 50px, tiež nastavme trvanie na 600ms - príkazom 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');
});

Pozri tiež

metóda show,
ktorá plynulo zobrazuje elementy
metóda stop,
ktorá umožňuje zastaviť spustenú animáciu
metóda delay,
ktorá nastavuje oneskorenie vykonania udalostí
vlastnosť jQuery.fx.off,
ktorá umožňuje globálne vypnúť animáciu
selektor animated,
ktorý vyberá elementy, ktoré sú v daný moment zapojené do animácie