jQuery návod – (5) Efekty

Vítejte v pátém díle našeho seriálu o jQuery. Dnes se budeme věnovat jedné z nejzajímavějších oblastí jQuery – efektům. Díky nim můžeme našim webovým stránkám dodat poutavost, dynamiku a moderní vzhled.

1. Co jsou to efekty v jQuery?

Efekty v jQuery nám umožňují animovat prvky na stránce. Může jít o změnu velikosti, průhlednosti, pozice nebo jiných vlastností. Přestože můžete efekty vytvářet čistě pomocí CSS, jQuery nám nabízí mnohem jednodušší a pružnější způsob, jak toho dosáhnout.

2. Základní efekty

fadeIn() a fadeOut(): Animují průhlednost prvku.

$("#prvek").fadeIn(); // postupně zobrazí prvek
$("#prvek").fadeOut(); // postupně schová prvek

$("#prvek").fadeIn(); // postupně zobrazí prvek

$("#prvek").fadeOut(); // postupně schová prvek

slideUp() a slideDown(): Animují výšku prvku.

$("#prvek").slideUp(); // "sbalí" prvek
$("#prvek").slideDown(); // "rozbalí" prvek

$("#prvek").slideUp(); // "sbalí" prvek

$("#prvek").slideDown(); // "rozbalí" prvek

toggle(): Přepíná mezi zobrazením a skrytím prvku.

$("#prvek").toggle(); // pokud je prvek viditelný, schová ho a naopak

$("#prvek").toggle(); // pokud je prvek viditelný, schová ho a naopak

3. Vlastní animace

Funkce .animate() vám umožní vytvořit vlastní animace. Můžete specifikovat, jaké vlastnosti chcete animovat a jak rychle.

$("#prvek").animate({
    opacity: 0.5,      // změní průhlednost na 50%
    width: "70%",      // změní šířku na 70% původní hodnoty
    marginLeft: "50px" // posune prvek o 50px doleva
}, 1500);              // doba trvání animace je 1500ms (1,5 sekundy)

$("#prvek").animate({

    opacity: 0.5,      // změní průhlednost na 50%

    width: "70%",      // změní šířku na 70% původní hodnoty

    marginLeft: "50px" // posune prvek o 50px doleva

}, 1500);              // doba trvání animace je 1500ms (1,5 sekundy)

4. Řetězení efektů

V jQuery můžete řetězit několik efektů za sebou:

$("#prvek").fadeIn().slideUp().slideDown().fadeOut();

$("#prvek").fadeIn().slideUp().slideDown().fadeOut();

5. Callback funkce

Pokud chcete po dokončení animace vykonat další akci, můžete použít tzv. callback funkci.

$("#prvek").fadeOut(function() {
    alert("Animace byla dokončena!");
});

$("#prvek").fadeOut(function() {

    alert("Animace byla dokončena!");

});

Po dokončení efektu fadeOut() se zobrazí vyskakovací okno s hláškou.

Závěr

Efekty v jQuery nám otevírají dveře k tvorbě moderních a dynamických webových stránek. Ačkoli může být lákavé používat je hojně, je dobré si uvědomit, že méně často znamená více. Efekty by měly zlepšovat uživatelskou zkušenost, ne ji zhoršovat. Přemýšlejte o svých návštěvnících a používejte efekty s rozumem.

V dalším díle se podíváme na způsoby, jak můžeme s jQuery upravovat prvky a jejich obsah. Děkuji za čtení a těším se na další setkání!