Metoda animate

Metoda animate umožňuje vytvářet animační efekty pro různé CSS vlastnosti. Jediný povinný parametr - objekt s CSS vlastnostmi, podobný tomu, co předáváme metodě css. Mnoho vlastností, které mají nečíselné hodnoty nebo několik hodnot, nemůže být animováno základní funkcionalitou jQuery (například background-color). Také ne vždy jsou podporována zkrácená názvy CSS vlastností, například font - místo toho je třeba použít fontSize nebo font-size. Před hodnotami lze napsat '+=' nebo '-=', v takovém případě bude zadaná hodnota přičtena nebo odečtena od aktuální hodnoty vlastnosti. Také místo číselných hodnot lze napsat show, hide nebo toggle. Všechny jQuery efekty, včetně animate, lze globálně vypnout pomocí nastavení jQuery.fx.off = true, které nastavuje hodnotu délky trvání na 0.

Syntaxe

Prvním parametrem animace je předán objekt s CSS vlastnostmi a jejich hodnotami ve formátu klíč: hodnota, které hodláme animovat. Zbývající parametry jsou považovány za nepovinné. Druhý parametr - určuje délku trvání animace v milisekundách, 400ms ve výchozím nastavení. Třetím parametrem funkci pro plynulý průběh přechodu (ve výchozím nastavení je to swing), a také čtvrtým - callback funkce, která se spustí po dokončení animace:

.animate(vlastnosti, [délka trvání ], [funkce pro plynulý průběh ], [callback funkce ]);

Čas lze zadávat nejen v milisekundách, ale i klíčovými slovy slow (600ms) a fast (200ms), čím větší hodnota, tím pomalejší animace. Lze druhým parametrem předat metodě různé možnosti, ve formě objektu JavaScriptu, obsahujícího dvojice klíč: hodnota:

.animate(vlastnosti, options);

Například nastavme pro CSS vlastnosti width a height hodnotu toggle. Délku trvání na 5000ms, funkci pro plynulý průběh předáme ve formě objektu, pro šířku to bude lineární funkce, a pro výšku - easeOutBounce, také po dokončení animace se nám jednou provede funkce (viz klíč complete), která za prvkem s #test umístí div s nápisem 'Animation complete.':

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

Níže v tabulce jsou uvedeny vlastnosti a metody objektu options a jejich popis:

Název	Popis
`duration`	Délka trvání animace v milisekundách - řetězec nebo číslo. `400ms` ve výchozím nastavení.
`easing`	Určuje, jakou funkci pro plynulý průběh použít. `swing` ve výchozím nastavení.
`queue`	Logická hodnota nebo řetězec. `true` v základním nastavení. Určuje - zařadit animaci do fronty. Při hodnotě `false` animace začne okamžitě. Pokud je parametr předán jako řetězec, animace bude zařazena do fronty, kterou tento parametr představuje. Při použití fronty s uživatelským názvem, animace se nespustí automaticky, aby se spustila - použijte `dequeue('queuename')`.
`specialEasing`	Zde můžete předat objekt, ve kterém klíči budou CSS vlastnosti, a hodnotami - jim odpovídající funkce pro plynulý průběh.
`step`	Funkce, která je volána pro každou animovanou vlastnost každého animovaného prvku. Umožňuje modifikovat `Tween` objekt, aby změnila hodnotu vlastnosti předtím, než je nastavena. Jako parametry přijímá aktuální hodnotu `tween` a `Tween` objekt.
`progress`	Funkce, volaná po každém kroku animace, pouze jednou pro každý prvek nezávisle na počtu animovaných vlastností. Funkce přijímá tři parametry `animation` (ve formě promisu), `progress` (číslo od `0` do `1`) a `remainingMs` (číslo zbývajících milisekund).
`complete`	Funkce, volaná jednou po skončení animace prvku. Funkce přijímá `animation` (ve formě promisu).
`start`	Funkce, která je volána, když animace prvku začíná. Funkce přijímá `animation` (ve formě promisu) a `jumpedToEnd` (Logická hodnota. Pokud `true`, pak animace automaticky končí).
`done`	Funkce, která je volána, když animace prvku končí (její promis je splněn úspěšně). Funkce přijímá `animation` (ve formě promisu) a `jumpedToEnd` (Logická hodnota. Pokud `true`, pak animace automaticky končí).
`fail`	Funkce, která je volána, když animace prvku končí s chybou (její promis je splněn s chybou). Funkce přijímá `animation` (ve formě promisu) a `jumpedToEnd` (Logická hodnota. Pokud `true`, pak animace automaticky končí).
`always`	Funkce, která je volána, když animace prvku je dokončena nebo zastavena bez dokončení (její promis je splněn úspěšně nebo s chybou). Funkce přijímá `animation` (ve formě promisu) a `jumpedToEnd` (Logická hodnota. Pokud `true`, pak animace automaticky končí).

Příklad

Pojďme při stisknutí tlačítka #left, posunout zelený čtverec doleva, a na tlačítko #right doprava o 50px, také nastavme délku trvání na 600ms - příkazem 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');
});

Viz také

metoda show,
která plynule zobrazuje prvky
metoda stop,
která umožňuje zastavit spuštěnou animaci
metoda delay,
která nastavuje zpoždění provádění událostí
vlastnost jQuery.fx.off,
která umožňuje globálně vypnout animaci
selektor animated,
který vybírá prvky, které jsou v daném okamžiku zapojeny do animace