slideToggle-metodi
Metodi slideToggle näyttää sulavasti
piilotetut elementit ja piilottaa näkyvät.
Syntaksi
Näyttäminen/piilottaminen annetun ajan,
400ms oletusarvoisesti:
.slideToggle(kesto);
Aikaa voi asettaa ei vain millisekunteina,
vaan myös avainsanoilla slow (600ms)
ja fast (200ms), mitä suurempi arvo,
sitä hitaampi animaatio:
.slideToggle('slow' tai 'fast');
Jos parametreja ei määritetä - animaatiota ei tule, elementit näkyvät/piiloutuvat välittömästi:
.slideToggle();
Voidaan myös toisena parametrina antaa easing-funktio, ja kolmantena callback-funktio - suoritetaan animaation valmistumisen jälkeen. Molemmat parametrit ovat valinnaisia:
.slideToggle(kesto, [easing-funktio], [callback-funktio]);
Metodille voi antaa erilaisia optioita, JavaScript-objektin muodossa, joka sisältää avain: arvo -pareja:
.slideToggle(options);
Tällainen objekti voi välittää seuraavia
parametreja ja funktioita - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Kuvauksen
näistä parametreista voit katsoa metodille
animate. Esimerkiksi,
asetetaan kesto ja easing-funktio:
.slideToggle( {duration: 600, easing: easeInSine} );
Esimerkki
Painetessa nappulaa, piilotetaan sulavasti
vanhempi div, joka sisältää kappaleita,
metodin slideToggle avulla (tämän div:n
löydämme metodin
parent avulla),
uudelleen painettaessa nappulaa, div
näytetään uudelleen sulavasti ja niin edelleen. Antamalla avainsanan
slow, asetamme nopeudeksi 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');
});
