Metoda slideToggle

Metoda slideToggle gladko prikaže skrite elemente in skrije prikazane.

Sintaksa

Prikaz/skrivanje v določenem času, 400ms privzeto:

javascript.slideToggle(trajanje);

Čas lahko določite ne le v milisekundah, ampak tudi s ključnimi besedami slow (600ms) in fast (200ms), večja kot je vrednost, počasnejša je animacija:

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

Če parametrov ne navedete - animacije ne bo, elementi se bodo prikazali/skriti takoj:

javascript.slideToggle();

Kot drugi parameter lahko podate tudi funkcijo zaubljanja (easing function), in kot tretji parameter callback funkcijo - ki se izvede po končani animaciji. Oba parametra sta neobvezna:

javascript.slideToggle(trajanje, [funkcija zaubljanja], [callback-funkcija]);

Metodi lahko podate različne možnosti (opcije), v obliki JavaScript objekta, ki vsebuje pare ključ: vrednost:

javascript.slideToggle(možnosti);

Tak objekt lahko prenaša naslednje parametre in funkcije - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Opis teh parametrov si lahko ogledate za metodo animate. Na primer, nastavimo trajanje in funkcijo zaubljanja:

javascript.slideToggle( {duration: 600, easing: easeInSine} );

Primer

Po pritisku na gumb gladko skrijmo starševski div, ki vsebuje odstavke, z metodo slideToggle (ta div bomo našli z metodo parent), po ponovnem pritisku na gumb, bo div spet gladko prikazan in tako naprej. S podajanjem ključne besede slow, nastavimo hitrost na 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');
});

Glejte tudi