Meetod fadeIn
Meetod fadeIn näitab peidetud
elemendid sujuvalt, muutes need läbipaistmatuks. Peita
elemendid on võimalik meetodi abil
fadeOut,
muutes need läbipaistvaks.
Süntaks
Näitamine määratud aja jooksul,
400ms vaikimisi:
.fadeIn(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:
.fadeIn('slow' või 'fast');
Kui parameetreid ei määrata - animatsiooni ei toimu, elemendid kuvatakse koheselt:
.fadeIn();
Samuti on võimalik teise parameetrina edastada sujuvusfunktsiooni, ning kolmandana callback-funktsiooni - käivitub pärast animatsiooni lõppu. Mõlemad parameetrid on valikulised:
.fadeIn(kestus, [sujuvusfunktsioon], [callback-funktsioon]);
Meetodile on võimalik edastada erinevaid valikuid, JavaScripti objekti kujul, mis sisaldab paare võti: väärtus:
.fadeIn(valikud);
Selline objekt võib edastada järgmisi
parameetreid ja funktsioone - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Nende
parameetrite kirjeldust saate vaadata meetodi
animate jaoks. Näiteks,
määrame kestuse ja sujuvusfunktsiooni:
.fadeIn( {duration: 800, easing: easeInSine} );
Näide
Järgmises näites nupu vajutamisel
#hide element #test
peidetakse meetodi fadeOut abil,
ja nupu #show vajutamisel - kuvatakse,
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 kuvamisel 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('?');
});
});
