Metóda slideToggle
Metóda slideToggle plynulo zobrazuje
skryté prvky a skrýva zobrazené.
Syntax
Zobrazenie/skrytie za daný čas,
400ms predvolené:
.slideToggle(trvanie);
Č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:
.slideToggle('slow' alebo 'fast');
Ak neuvádzate parametre - animácia nebude, prvky budú zobrazované/skryté okamžite:
.slideToggle();
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é:
.slideToggle(trvanie, [funkcia plynulosti], [callback funkcia]);
Je možné metóde odovzdať rôzne možnosti, vo forme objektu JavaScript, obsahujúceho páry kľúč: hodnota:
.slideToggle(možnosti);
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:
.slideToggle( {duration: 600, easing: easeInSine} );
Príklad
Po kliknutí na tlačidlo, plynulo skryjme
rodičovský div, ktorý obsahuje odseky,
pomocou metódy slideToggle (tento div
najdeme pomocou metódy
parent),
po opakovanom kliknutí na tlačidlo, div bude
znovu plynulo zobrazený atď. Odovzdaním kľúčového slova
slow, nastavíme rýchlosť na 600ms:
<button>toggle text</button>
<div>
<p id='test'>text text text text text text text</p>
<p>text text text text text text text</p>
<p>text text text text text text text</p>
</div>
$('button').click(function() {
$('#test').parent().slideToggle('slow');
});