jQuery Effects - Animace
S jQuery můžete vytvářet vlastní animace.
jQuery Animations – Metoda animate().
animate()K vytváření vlastních animací se používá metoda jQuery .
Syntax:
$(selector).animate({params},speed,callback);
Požadovaný parametr params definuje vlastnosti CSS, které mají být animovány.
Volitelný parametr rychlosti určuje dobu trvání efektu. Může nabývat následujících hodnot: „slow“, „fast“ nebo milisekundy.
Volitelný parametr zpětného volání je funkce, která se má provést po dokončení animace.
Následující příklad ukazuje jednoduché použití animate()metody; přesune prvek <div> doprava, dokud nedosáhne vlastnosti left 250px:
Příklad
$("button").click(function(){
$("div").animate({left: '250px'});
});
Ve výchozím nastavení mají všechny prvky HTML statickou pozici a nelze je přesouvat.
Chcete-li manipulovat s pozicí, nezapomeňte nejprve nastavit vlastnost CSS position prvku na relativní, pevnou nebo absolutní!
jQuery animate() – manipulace s více vlastnostmi
Všimněte si, že současně lze animovat více vlastností:
Příklad
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Je možné pomocí metody animate() manipulovat VŠECHNY vlastnosti CSS?
Ano, skoro! Je tu však jedna důležitá věc, kterou je třeba si zapamatovat: všechny názvy vlastností musí být při použití s metodou animate() psány velkými písmeny: Budete muset napsat paddingLeft místo padding-left, marginRight místo margin-right a tak dále.
Barevná animace také není součástí základní knihovny jQuery.
Pokud chcete animovat barvy, musíte si stáhnout
plugin Color Animations z jQuery.com.
jQuery animate() – Použití relativních hodnot
Je také možné definovat relativní hodnoty (hodnota je pak relativní k aktuální hodnotě prvku). To se provede vložením += nebo -= před hodnotu:
Příklad
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate() – Použití předdefinovaných hodnot
Můžete dokonce zadat hodnotu animace vlastnosti jako „ show“, „ hide“ nebo „ toggle“:
Příklad
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
jQuery animate() – Používá funkcionalitu fronty
Ve výchozím nastavení jQuery přichází s funkcí fronty pro animace.
To znamená, že pokud napíšete více animate()volání po sobě, jQuery vytvoří „interní“ frontu s těmito voláními metod. Poté spustí animované volání JEDEN po JEDNOM.
Pokud tedy chcete provádět různé animace po sobě, využíváme funkce fronty:
Příklad 1
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
Níže uvedený příklad nejprve přesune <div>prvek doprava a poté zvětší velikost písma textu:
Příklad 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
Cvičení jQuery
Referenční příručka k efektům jQuery
Úplný přehled všech efektů jQuery naleznete v naší Referenční příručce efektů jQuery .