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:

javascript.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:

javascript.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:

javascript.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:

javascript.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:

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

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

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

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

Zie ook