Metóda toggle

Metóda toggle strieda plynulé zobrazovanie/skrývanie prvkov. Ak je prvok zobrazený, bude skrytý a naopak.

Syntax

Zobrazenie za daný čas v milisekundách, 400ms predvolene:

.toggle(duration);

Čas je možné zadať nielen v milisekundách, ale aj kľúčovými slovami slow (600ms) a fast (200ms), čím väčšia hodnota, tým pomalšia animácia:

.toggle('slow' alebo 'fast');

Je možné parametrom display odovzdať hodnotu true alebo false. Ak true, prvok sa bude len zobrazovať, false - skrývať:

.toggle(display);

Ak neuvádzate parametre - animácia nebude, prvky sa budú zobrazovať/skrývať okamžite:

.toggle();

Je možné aj druhým parametrom odovzdať funkciu plynulosti, a aj tretím callback funkciu - spustí sa po vykonaní animácie. Oba parametre sú voliteľné:

.toggle(duration, [easing function], [callback function]);

Je možné jednoducho druhým voliteľným parametrom odovzdať callback funkciu - spustí sa po vykonaní animácie:

.toggle(duration, [callback function]);

Je možné metóde odovzdať rôzne možnosti, vo forme JavaScript objektu, obsahujúceho páry kľúč: hodnota:

.toggle(options);

Takýto objekt môže odovzdávať nasledujúce parametre a funkcie - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Popis týchto parametrov môžete pozrieť pre metódu animate. Napríklad, nastavíme trvanie a funkciu plynulosti:

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

Príklad

Po stlačení tlačidla, plynulo zobrazme skrytý odsek pomocou metódy toggle. Odovzdaním kľúčového slova slow nastavíme rýchlosť na 600ms. Pri opätovnom stlačení - skryjme:

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

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

Pozrite si aj

metóda fadeToggle,
ktorý mení priehľadnosť prvkov
metóda slideToggle,
ktorý strieda plynulé zobrazovanie/skrývanie prvkov
metóda show,
ktorý plynulo zobrazuje prvky
metóda hide,
ktorý plynulo skrýva prvky