Methode fadeToggle

De methode fadeToggle toont of verbergt elementen om beurt vloeiend door hun doorzichtigheid te animeren.

Syntaxis

Tonen/verbergen in een bepaalde tijd, standaard 400ms:

.fadeToggle(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:

.fadeToggle('slow' of 'fast');

Als geen parameters worden opgegeven - zal er geen animatie zijn, elementen zullen onmiddellijk verschijnen/verdwijnen:

.fadeToggle();

Je kunt ook als tweede parameter een easing-functie doorgeven, en als derde een callback-functie - wordt uitgevoerd na het voltooien van de animatie. Beide parameters zijn optioneel:

.fadeToggle(duur, [easing-functie], [callback-functie]);

Je kunt verschillende opties aan de methode doorgeven, in de vorm van een JavaScript-object, dat sleutel: waarde paren bevat:

.fadeToggle(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. Bijvoorbeeld, laten we de duur en easing-functie instellen:

.fadeToggle( {duration: 800, easing: easeInSine} );

Voorbeeld

In het volgende voorbeeld wordt bij de eerste klik op de knop #toggle het element met #test verborgen, en bij de volgende klik - getoond. Hiervoor gebruiken we de methode fadeToggle. Ook stellen we de snelheid in op 1000ms en de waarde van de easing-functie op linear:

<button id="toggle">toggle</button>
<div id="test"></div>

#test {
	width: 200px;
	height: 200px;
	background: green;
	color: white;
	margin-top: 10px;
}

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

Zie ook

methode slideToggle,
die vloeiend tonen/verbergen van elementen afwisselt
methode fadeTo,
die de doorzichtigheid van elementen wijzigt
methode toggle,
die tonen/verbergen van elementen afwisselt
methode animate,
die eigenschappen van elementen animeert