Opravdu živé webové stránky
Dochází-li na stránce k nějaké změně, může tato změna nastat skokem, nebo může být plynule animována. Stačí si třeba představit, že se má něco na stránce skrýt – může to najednou „zhasnout“ nebo mizet postupně. Druhý způsob vypadá zajímavěji, efektněji. Podobně třeba změna rozměrů nebo pozice (určitě znáte třeba překryvné reklamní prvky, které po kliknutí na zavírací tlačítko odjedou ze stránky pryč).
S klasickým JavaScriptem by to bylo poměrně obtížně realizovatelné. Znamenalo by to aktivovat periodický časovač, který by například každou padesátinu sekundy zajistit přepočet hodnot a jejich nastavení. Bylo by potřeba napsat relativně mnoho kódu.
To ale s jQuery není nutné, framework totiž obsahuje přímou podporu pro jednoduchou implementaci animací a souvisejících efektů. Často stačí napsat jen jednoduchý příkaz, který vykoná vše potřebné.
Obrázku, zmiz!
Jak zajistit zmizení obrázku? Jednoduše – opacita (neprůhlednost) obrázku se bude postupně snižovat, až obrázek zcela zmizí. S jQuery je to velmi snadné:
$('#image').fadeOut();
$('#image').fadeOut(2000);
$('#image').fadeOut(1000, 'linear');
Všechny tři příkazy dělají víceméně totéž, jen s drobnými odchylkami. První zajistí zmizení obrázku za výchozí čas, což je 400 milisekund. Ve druhém se použije explicitní doba mizení, tedy 2000 ms. A ve třetím obrázek zmizí za 1000 ms, ovšem lineárně – výchozí je totiž způsob animace (tzv. easing) nazvaný „swing“, kdy je rozjezd i dojezd pomalejší.
Další způsoby animace lze přidat pomocí pluginů, bude o tom řeč v některém z pozdějších dílů seriálu.
Metodu fadeOut() lze ještě dále parametrizovat – předá se jí objekt s hodnotami, které chceme nastavit:
var opts = {
duration: 200,
easing: 'linear',
complete: function() {
alert('Hotovo!');
}
};
$('#image').fadeOut(opts);
Obrázek zmizí lineárně za 200 ms. Po dokončení animace ze zavolá definovaná funkce, tedy v tomto případě ta anonymní, volající zobrazení zprávy pro uživatele. Tam by šla přiřadit také další animace, která by následovala, to lze ale zajistit i jednodušeji:
$('#image').fadeOut(2000).fadeIn(3000);
$('#image').fadeOut(2000).delay(5000).fadeIn(3000);
Animace lze totiž řetězit za sebou – po skončení jedné bude pokračovat další. V tomto případě na prvním řádku obrázek nejdřív zmizí a pak se hned zase objeví (pomaleji, než zmizel). Druhý řádek přidává prodlevu, která proběhne po zmizení obrázku, než se začne opět objevovat.
Chcete, aby obrázek jen „polozmizel“ (tedy zůstal částečně zobrazen, transparentní)? I to lze zajistit:
$('#image').fadeTo(200, 0.3);
Obrázek se zde animuje do opacity 30 %, takže zůstane částečně vidět. Jde to samozřejmě i opačně, tedy směrem k vyšší opacitě.
Metody fadeOut() a fadeIn() jsou z hlediska volání prakticky identické, každá má řadu možností zavolání. V porovnání s nimi je metoda fadeTo() relativně omezená, například jí nejde předat objekt s parametry.
Ještě je k dispozici metoda fadeToggle(), která skrývá nebo zobrazuje prvek podle toho, v jakém stavu se nacházel (zda byl zobrazený nebo skrytý).
„Složitější“ mizení
Prvky mohou mizet nebo se naopak objevovat ještě trochu jiným způsobem, kombinujícím v jedné animaci dva efekty – změnu opacity a velikosti. Není to ale o nic složitější:
$('#image').hide(300);
$('#image').show(2000);
$('#image').hide(400).delay(1000).show(200);
Obrázek zmizí za 300 ms tak, že se bude zmenšovat a současně průhlednět – až zmizí docela. Příkaz na druhém řádku ho naopak pozvolna zobrazí. Třetí příkaz kombinuje zmizení, prodlevu a opětovné zobrazení. Pozor však na toto:
$('#image').hide();
$('#image').show();
Na rozdíl od metod fadeOut() a fadeIn() tu výchozí hodnota není 400 ms, nýbrž 0. Prvek tedy zmizí nebo se zobrazí okamžitě. Animace tedy v podstatě neproběhne, vykoná se jediná operace.
Zarolování a vyrolování
Určitě znáte ten efekt, kdy se po kliknutí například na záhlaví nějakého boxu na stránce obsah tohoto boxu zaroluje (a zůstane jen to záhlaví), resp. se naopak vyroluje. I na to jsou v jQuery připraveny metody:
$('.boxhdr').click(function() {
$(this).parent().child('.boxcont').slideToggle();
});
Příklad vychází z toho, že všechna záhlaví zarolovatelných boxů mají třídu boxhdr a obsah boxů boxcont (přičemž oba prvky jsou potomky boxu jako takového). Pak stačí nastavit reakci na kliknutí pro všechna záhlaví tak, že se pro záhlaví zjistí obsah boxu a ten se buď zaroluje nebo vyroluje, podle aktuálního stavu – to zajistí metoda slideToggle().
Pro samotné zarolování lze použít slideUp(), pro vyrolování slideDown(). Také tady je k dispozici celá škála možností jako u fadeIn() a fadeOut().
Další možnosti animací
V příštím dílu seriálu se podíváme na další věci, které lze pomocí animací dělat a také jak lze ovlivnit samotný proces animace (snímkovou frekvenci a další vlastnosti).