Metoden fadeOut
Metoden fadeOut skjuler
elementer gradvist. Vis elementer med metoden
fadeIn,
som gør dem uigennemsigtige.
Syntaks
Visning over en angivet varighed,
400ms som standard:
.fadeOut(varighed);
Tid kan angives ikke kun i millisekunder,
men også med nøgleordene slow (600ms)
og fast (200ms), hvor højere værdi
betyder langsommere animation:
.fadeOut('slow' eller 'fast');
Hvis parametre ikke angives - vil der ikke være animation, elementer skjules øjeblikkeligt:
.fadeOut();
Man kan også sende en easing-funktion som anden parameter, samt en callback-funktion som tredje parameter - som udføres efter animationen er afsluttet. Begge parametre er valgfrie:
.fadeOut(varighed, [easing-funktion], [callback-funktion]);
Man kan sende metoden forskellige indstillinger, i form af et JavaScript-objekt, der indeholder par nøgle: værdi:
.fadeOut(indstillinger);
Et sådant objekt kan sende følgende
parametre og funktioner - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Beskrivelse
af disse parametre kan du se for metoden
animate. For eksempel,
lad os sætte varigheden og easing-funktionen:
.fadeOut( {duration: 800, easing: easeInSine} );
Eksempel
I det følgende eksempel, når der klikkes på knappen
#hide, vil elementet med #test
blive skjult ved hjælp af metoden fadeOut,
og på knappen #show - blive vist, med
fadeIn. Vi sætter også
hastigheden til 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);
});
Eksempel
Og i det følgende eksempel, efter afslutningen
af animationen ved visning af elementet #test, vil vi
vise en besked
med teksten '!', og ved skjuling
med teksten '?':
<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('?');
});
});
