Methode fadeIn
De methode fadeIn toont verborgen
elementen vloeiend door ze ondoorzichtig
te maken. Elementen verbergen
kan met de methode
fadeOut,
door ze doorzichtig te maken.
Syntaxis
Tonen gedurende een opgegeven tijd,
standaard 400ms:
.fadeIn(duur);
Tijd kan niet alleen in milliseconden worden opgegeven,
maar ook met de sleutelwoorden slow (600ms)
en fast (200ms), hoe groter de waarde,
hoe langzamer de animatie:
.fadeIn('slow' of 'fast');
Als geen parameters worden opgegeven - zal er geen animatie zijn, elementen worden onmiddellijk getoond:
.fadeIn();
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:
.fadeIn(duur, [easing-functie], [callback-functie]);
Je kunt verschillende opties aan de methode doorgeven, in de vorm van een JavaScript-object, dat paren sleutel: waarde bevat:
.fadeIn(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:
.fadeIn( {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
de methode 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, na voltooiing
van de animatie bij het tonen van het element #test,
tonen we een bericht
met de tekst '!', en bij 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('?');
});
});
