Methode fadeTo

De methode fadeTo verandert soepel de transparantie van een element naar een opgegeven waarde, in het bereik van 0 tot 1.

Syntaxis

De duur en transparantie worden opgegeven bij elk gebruik van de methode. Het wijzigen van de transparantie binnen de opgegeven tijd, standaard 400ms:

.fadeTo(duur, transparantie waarde);

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:

.fadeTo('slow' of 'fast', transparantie waarde);

Een callback-functie kan ook als derde (optionele) parameter worden doorgegeven - deze wordt uitgevoerd na voltooiing van de animatie:

.fadeTo(duur, transparantie waarde, [callback-functie]);

Een easing-functie en een callback-functie (beide optionele parameters) kunnen ook worden doorgegeven - wordt uitgevoerd na voltooiing van de animatie:

.fadeTo(duur, transparantie waarde, [easing-functie], [callback-functie]);

Voorbeeld

In het volgende voorbeeld, met behulp van de methode fadeTo wordt bij het klikken op de knop #hide het element met #test verborgen door de transparantie te verminderen naar 0.5, en bij #show - wordt het getoond:

<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

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

$('#show').on('click', function() {
	$('#test').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
	$('#test').fadeTo(1000, 0.5);
});

Zie ook

methode fadeToggle,
die de transparantie van elementen verandert
methode fadeIn,
die verborgen elementen soepel toont, door ze ondoorzichtig te maken
methode animate,
die eigenschappen van elementen animeert