Metoda toggle

Metoda toggle střídá plynulé zobrazení/skrytí prvků. Pokud je prvek zobrazen, bude skryt a naopak.

Syntaxe

Zobrazení po zadanou dobu v milisekundách, 400ms ve výchozím nastavení:

javascript.toggle(doba trvání);

Čas lze zadat nejen v milisekundách, ale i klíčovými slovy slow (600ms) a fast (200ms), čím vyšší hodnota, tím pomalejší animace:

javascript.toggle('slow' nebo 'fast');

Parametrem display lze předat hodnotu true nebo false. Pokud true, prvek bude pouze zobrazen, false - skryt:

javascript.toggle(display);

Pokud nejsou parametry uvedeny - animace nebude, prvky se budou zobrazovat/skrývat okamžitě:

javascript.toggle();

Jako druhý parametr lze také předat funkci plynulosti a jako třetí callback funkci - spustí se po dokončení animace. Oba parametry jsou volitelné:

javascript.toggle(doba trvání, [funkce plynulosti], [callback funkce]);

Jako druhý volitelný parametr lze jednoduše předat callback funkci - spustí se po dokončení animace:

javascript.toggle(doba trvání, [callback funkce]);

Metodu lze předat různé možnosti, ve formě JavaScript objektu obsahujícího dvojice klíč: hodnota:

javascript.toggle(options);

Takový objekt může předávat následující parametry a funkce - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Popis těchto parametrů můžete zobrazit pro metodu animate. Například, nastavme dobu trvání a funkci plynulosti:

javascript.toggle( {duration: 800, easing: easeInSine} );

Příklad

Po stisknutí tlačítka plynule zobrazme skrytý odstavec pomocí metody toggle. Předáním klíčového slova slow nastavíme rychlost na 600ms. Při opětovném stisknutí - skrýt:

html<button>zobrazit text</button>
<p style="display: none">text</p>

javascript$('button').click(function() {
  $('p').toggle('slow');
});

Viz také