Meetod fadeOut
Meetod fadeOut peidab
elemendid sujuvalt. Elemente saab näidata meetodi
fadeIn abil,
muutes need läbipaistmatuks.
Süntaks
Näitamine määratud aja jooksul,
400ms vaikimisi:
.fadeOut(kestus);
Aega saab määrata mitte ainult millisekundites,
vaid ka märksõnadega slow (600ms)
ja fast (200ms), mida suurem väärtus,
seda aeglasem animatsioon:
.fadeOut('slow' või 'fast');
Kui parameetreid ei määrata - animatsiooni ei toimu, elemendid peiduvad hetkega:
.fadeOut();
Saab ka teise parameetrina edastada sujuvusfunktsiooni, ning kolmandana callback-funktsiooni - käivitub pärast animatsiooni lõppu. Mõlemad parameetrid on valikulised:
.fadeOut(kestus, [sujuvusfunktsioon], [callback-funktsioon]);
Meetodile saab edastada erinevaid valikuid, JavaScripti objekti kujul, mis sisaldab paare võti: väärtus:
.fadeOut(valikud);
Selline objekt saab edastada järgmised
parameetrid ja funktsioonid - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Nende
parameetrite kirjelduse saate vaadata meetodi
animate juures. Näiteks,
määrame kestuse ja sujuvusfunktsiooni:
.fadeOut( {duration: 800, easing: easeInSine} );
Näide
Järgmises näites nupule vajutamisel
#hide element #test
peidetakse meetodi fadeOut abil,
ja nupul #show - näidatakse,
meetodi fadeIn abil. Samuti määrame
kiiruseks 1000ms:
<button id="hide">peida</button>
<button id="show">näita</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);
});
Näide
Järgmises näites pärast animatsiooni
lõppu elemendi #test näitamisel me
väljastame sõnumi
tekstiga '!', ja peitmisel
tekstiga '?':
<button id="hide">peida</button>
<button id="show">näita</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('?');
});
});
