Methode slideToggle
De methode slideToggle toont verborgen
elementen soepel en verbergt getoonde elementen.
Syntaxis
Weergeven/verbergen in een opgegeven tijd,
standaard 400ms:
.slideToggle(duur);
Tijd kan niet alleen in milliseconden worden opgegeven,
maar ook met de sleutelwoorden slow (600ms)
en fast (200ms), hoe hoger de waarde,
hoe langzamer de animatie:
.slideToggle('slow' of 'fast');
Als er geen parameters worden opgegeven - zal er geen animatie zijn, elementen zullen onmiddellijk verschijnen/verdwijnen:
.slideToggle();
Je kunt ook als tweede parameter een easing-functie doorgeven, en als derde een callback-functie - deze wordt uitgevoerd na voltooiing van de animatie. Beide parameters zijn optioneel:
.slideToggle(duur, [easing-functie], [callback-functie]);
Je kunt verschillende opties aan de methode doorgeven, in de vorm van een JavaScript-object, dat paren sleutel: waarde bevat:
.slideToggle(opties);
Zo'n object kan de volgende
parameters en functies doorgeven - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Beschrijving
van deze parameters kun je bekijken voor de methode
animate. Laten we bijvoorbeeld
de duur en easing-functie instellen:
.slideToggle( {duration: 600, easing: easeInSine} );
Voorbeeld
Laten we na een knopklik soepel de
ouder-div verbergen, die alinea's bevat,
met behulp van de methode slideToggle (deze div
vinden we met behulp van de methode
parent),
na herhaalde knopklik zal de div
weer soepel worden getoond, enz. Door het sleutelwoord
slow door te geven, stellen we de snelheid in op 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');
});
