Metoden slideToggle
Metoden slideToggle viser
skjulte elementer jevnt og skjuler viste.
Syntaks
Visning/skjuling over en gitt varighet,
400ms som standard:
.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:
.slideToggle('slow' eller 'fast');
Hvis du ikke angir parametere - vil animasjonen ikke skje, elementene vil vises/skjules øyeblikkelig:
.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:
.slideToggle(varighet, [easing-funksjon], [callback-funksjon]);
Du kan sende metoden ulike alternativer, i form av et JavaScript-objekt som inneholder par nøkkel: verdi:
.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:
.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:
<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');
});
