slideToggle-metodi

Metodi slideToggle näyttää sulavasti piilotetut elementit ja piilottaa näkyvät.

Syntaksi

Näyttäminen/piilottaminen annetun ajan, 400ms oletusarvoisesti:

javascript.slideToggle(kesto);

Aikaa voi asettaa ei vain millisekunteina, vaan myös avainsanoilla slow (600ms) ja fast (200ms), mitä suurempi arvo, sitä hitaampi animaatio:

javascript.slideToggle('slow' tai 'fast');

Jos parametreja ei määritetä - animaatiota ei tule, elementit näkyvät/piiloutuvat välittömästi:

javascript.slideToggle();

Voidaan myös toisena parametrina antaa easing-funktio, ja kolmantena callback-funktio - suoritetaan animaation valmistumisen jälkeen. Molemmat parametrit ovat valinnaisia:

javascript.slideToggle(kesto, [easing-funktio], [callback-funktio]);

Metodille voi antaa erilaisia optioita, JavaScript-objektin muodossa, joka sisältää avain: arvo -pareja:

javascript.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:

javascript.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:

html<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>

javascript$('button').click(function() {
  $('#test').parent().slideToggle('slow');
});

Katso myös