Metoden slideToggle

Metoden slideToggle viser skjulte elementer jevnt og skjuler viste.

Syntaks

Visning/skjuling over en gitt varighet, 400ms som standard:

javascript.slideToggle(varighet);

Tid kan angis ikke bare i millisekunder, men også med nøkkelordene slow (600ms) og fast (200ms), jo høyere verdi, jo tregere animasjon:

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

Hvis du ikke angir parametere - vil animasjonen ikke skje, elementene vil vises/skjules øyeblikkelig:

javascript.slideToggle();

Du kan også sende en easing-funksjon som andre parameter, og en tredje callback-funksjon - som utløses etter at animasjonen er fullført. Begge parameterne er valgfrie:

javascript.slideToggle(varighet, [easing-funksjon], [callback-funksjon]);

Du kan sende metoden ulike alternativer, i form av et JavaScript-objekt som inneholder par nøkkel: verdi:

javascript.slideToggle(alternativer);

Et slikt objekt kan sende følgende parametere og funksjoner - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Beskrivelse av disse parameterne kan du se for metoden animate. For eksempel, la oss sette varighet og easing-funksjon:

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

Eksempel

La oss etter å ha trykket på knappen, jevnt skjule foreldre-diven, som inneholder avsnitt, ved hjelp av metoden slideToggle (denne diven finner vi ved hjelp av metoden parent), etter å trykke på knappen på nytt, vil diven blir jevnt vist igjen osv. Ved å sende nøkkelordet slow, setter vi hastigheten til 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');
});

Se også