Metoden slideToggle
Metoden slideToggle visar mjukt
dolda element och döljer synliga.
Syntax
Visning/döljning under given tid,
400ms som standard:
.slideToggle(varaktighet);
Tiden kan anges inte bara i millisekunder,
utan också med nyckelorden slow (600ms)
och fast (200ms), ju högre värde,
desto långsammare animation:
.slideToggle('slow' eller 'fast');
Om inga parametrar anges - kommer ingen animation att ske, elementen kommer att visas/döljas omedelbart:
.slideToggle();
Man kan också som andra parameter skicka en easing-funktion, samt som tredje parameter en callback-funktion - som triggas efter att animationen är klar. Båda parametrarna är valfria:
.slideToggle(varaktighet, [easing-funktion], [callback-funktion]);
Man kan skicka metoden olika alternativ, i form av ett JavaScript-objekt, innehållande par av nyckel: värde:
.slideToggle(options);
Ett sådant objekt kan skicka följande
parametrar och funktioner - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Beskrivning
av dessa parametrar kan du se för metoden
animate. Till exempel,
låt oss ställa in varaktighet och easing-funktion:
.slideToggle( {duration: 600, easing: easeInSine} );
Exempel
Låt oss efter att ha klickat på knappen, mjukt dölja
föräldra-div:en, som innehåller stycken,
med hjälp av metoden slideToggle (denna div
hittar vi med metoden
parent),
efter att ha klickat på knappen igen, kommer div att
visas mjukt igen osv. Genom att skicka nyckelordet
slow sätter vi hastigheten till 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');
});
