Metod slideToggle
Metod slideToggle postepeno prikazuje
skrivene elemente i skriva prikazane.
Sintaksa
Prikaz/skrivanje u zadatom vremenu,
400ms podrazumevano:
.slideToggle(trajanje);
Vreme se može zadati ne samo u milisekundama,
već i ključnim rečima slow (600ms)
i fast (200ms), što je veća vrednost,
to je animacija sporija:
.slideToggle('slow' ili 'fast');
Ako se ne navedu parametri - neće biti animacije, elementi će se prikazivati/skrivati trenutno:
.slideToggle();
Takođe se može drugim parametrom proslediti funkcija za ublažavanje (easing), kao i trećim callback funkcija - izvršiće se nakon završetka animacije. Oba parametra su opciona:
.slideToggle(trajanje, [funkcija ublažavanja], [callback funkcija]);
Metodu se mogu proslediti različite opcije, u obliku JavaScript objekta, koji sadrži parove ključ: vrednost:
.slideToggle(opcije);
Takav objekat može da prenosi sledeće
parametre i funkcije - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Opis
ovih parametara možete pogledati za metod
animate. Na primer,
podesimo trajanje i funkciju ublažavanja:
.slideToggle( {duration: 600, easing: easeInSine} );
Primer
Hajde da nakon klika na dugme, postepeno sakrijemo
roditeljski div, koji sadrži pasuse,
pomoću metoda slideToggle (ovaj div
pronaći ćemo pomoću metoda
parent),
nakon ponovnog klika na dugme, div će
ponovo biti postepeno prikazan itd. Prosleđivanjem ključne reči
slow, podesićemo brzinu 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');
});