Pomohl Vám můj web?
Podpořte psaní dalších článků!

jQuery-návod.cz - vše okolo jQuery - jQuery UI, pluginy a další




(5) Efekty

Kategorie: Efekty

Efekty

Zatím jsme se naučili metodu toggle, která text schovala nebo zobrazila. Pokud text chcete jen schovat, použijeme metodu hide(), na zobrazení pak show(). U obou funkcí jsou volitelné dva parametry, první je doba trvání, která se udává v milisekundách nebo pomocí výrazu v angličine (slow - pomalu, speed - rychle...). Jedna sekunda má 1000 milisekund. Druhý parametr je callback funkce, tedy to, co se provede po skončení efektu.

//HTML část
<div id="odstavec">Text, který se schová</div>

// příklad použití hide s oběma parametry
function poSchovani()        // obsah této funkce se provede po dokončení animace
{
    alert("schovano");    // javascriptova funkce - okno s nápisem schováno
}

// jQuery část
$("#odstavec").hide(2000, poSchovani());

Jak to bude vypadat se můžete podívat tady.Stejný kód můžeme použít i pro show. Kód je myslím dostatečně komentovaný, v případe potřeby napište do diskuze nebo mně. JQuery samozřejmě nabízí vetší množství funkcí.

  • fadeIn(rychlost, callback) - zobrazí vybraný prvek
  • fadeOut(rychlost, callback) - schová vybraný prvek
  • fadeTo(rychlost, konečná průhlednost, callback) - mění průhlednost
  • slideDown(rychlost, callback) - vybraný prvek "sjede dolů", takže se objeví
  • slideUp(rychlost, callback) - vybraný prvek "zajede nahoru", takže zmizí
  • slideToggle(rychlost, callback) - podle potřeby prvek "sjede / zajede"

$("#odstavec").fadeIn(500);
// zobrazí vybraný prvek 

$("#odstavec").fadeOut(2000, "alert('hotovo');");
// schová vybraný prvek a pak zobrazí upozornění

$("#odstavec").fadeTo(500, 0.5);
// změní průhlednost prvku na 50% 

$("#odstavec").fadeDown(800);
// vybraný prvek sjede dolů

Vyzkoušet všechny efekty můžete na této stránce.

Animate - tvorba animací

Funkce animate slouží k vytváření složitějších animací, proto se o ní rozepíšu. Má až čtyři volitelné parametry, povinné jsou pouze dva. První parametr je vzhled po dokončení animace, ale na rozdíl od ostatních funkcí lze vytvářet složitější animace. Druhý parametr je opět doba probíhání funkce. Třetím parametr je zrychlení, nabývá hodnot linear(rovnoměrné) nebo swing(nerovnoměrné). Čtvrtý je callback funkce.

//CSS část
#odstavec {
     left:100px;              // vzdálenost od levého okraje
     top:100px;               // vzdálenost od horního okraje
     width:100px;             // šírka
     height:100px;            // výška
     backgournd-color:blue;   // barva pozadí
     color:black;             // barva písma
}

//HTML část
<div id="odstavec">Text v odstavci</div>

// jQuery cást
$("#odstavec").animate({                  
        width: "70%",             // šírka
        height: "130%",           // výška                  
        opacity: 0.4,             // průhlednost
        border: "10px solid red", // okraj
        fontSize: "300%",         // velikost písma
      }, 1500 );              

Nakonec představím funkci stop, která zastaví všechny právě probíhající animace. Obvykle se kombinuje s událostmi, třeba kliknutí na tlačítko. O událostech se dozvíte v příští kapitole.

$.stop(); 
// zastaví všechny animace

Zobrazit diskuzi