Metodas fadeIn
Metodas fadeIn sklandiai rodo paslėptus
elementus, padarydamas juos nepermatomus. Paslėpti
elementus galima naudojant metodą
fadeOut,
padarant juos permatomus.
Sintaksė
Rodymas per nustatytą laiką,
400ms pagal nutylėjimą:
.fadeIn(trukme);
Laiką galima nurodyti ne tik milisekundėmis,
bet ir raktažodžiais slow (600ms)
ir fast (200ms), kuo didesnė reikšmė,
tuo lėtesnė animacija:
.fadeIn('slow' arba 'fast');
Jei nenurodyti parametrai - animacijos nebus, elementai bus rodomi akimirksniu:
.fadeIn();
Taip pat antruoju parametru galima perduoti sklandumo funkciją, o trečiuoju callback funkciją - suveiks po animacijos užbaigimo. Abu parametrai nėra privalomi:
.fadeIn(trukme, [sklandumo funkcija], [callback funkcija]);
Metodui galima perduoti įvairias parinktis, JavaScript objekto pavidalu, kuriame yra poros raktas: reikšmė:
.fadeIn(options);
Tokiame objekte galima perduoti šiuos
parametrus ir funkcijas - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Šių
parametrų aprašymą galite peržiūrėti metodo
animate pavyzdyje. Pavyzdžiui,
nustatykime trukmę ir sklandumo funkciją:
.fadeIn( {duration: 800, easing: easeInSine} );
Pavyzdys
Šiame pavyzdyje paspaudus mygtuką
#hide elementas su #test bus
paslėptas naudojant metodą fadeOut,
o mygtukas #show - rodytas, su
metodu fadeIn. Taip pat nustatysime
greitį į 1000ms:
<button id="hide">slėpti</button>
<button id="show">rodyti</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);
});
Pavyzdys
O šiame pavyzdyje baigus
animaciją rodant elementą #test mes
atspausdinsime pranešimą
su tekstu '!', o slepiant
su tekstu '?':
<button id="hide">slėpti</button>
<button id="show">rodyti</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('?');
});
});
