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:
.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:
.fadeOut('slow' of 'fast');
Als er geen parameters worden opgegeven - zal er geen animatie zijn, elementen worden onmiddellijk verborgen:
.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:
.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:
.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:
.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:
<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').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 '?':
<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').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
