Methode fadeOut

De methode fadeOut verbergt elementen vloeiend. Elementen kunnen weer getoond worden met de methode fadeIn, door ze ondoorzichtig te maken.

Syntaxis

Tonen over een opgegeven tijd, standaard 400ms:

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

javascript.fadeOut('slow' of 'fast');

Als er geen parameters worden opgegeven - zal er geen animatie zijn, elementen worden onmiddellijk verborgen:

javascript.fadeOut();

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:

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

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

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

Voorbeeld

In het volgende voorbeeld wordt bij het klikken op de knop #hide het element met #test verborgen met de methode fadeOut, en bij de knop #show - getoond, met fadeIn. We stellen ook de snelheid in op 1000ms:

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').fadeIn(1000);
});

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

Voorbeeld

En in het volgende voorbeeld tonen we na het voltooien van de animatie bij het tonen van het element #test een bericht met de tekst '!', en bij het verbergen met de tekst '?':

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').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

Zie ook