Metodas fadeOut
Metodas fadeOut sklandžiai paslepia
elementus. Parodyti elementus galima naudojant metodą
fadeIn,
padarant juos nepermatomais.
Sintaksė
Rodymas per nustatytą laiką,
400ms pagal nutylėjimą:
.fadeOut(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:
.fadeOut('slow' arba 'fast');
Jei nenurodyti parametrai - animacijos nebus, elementai bus paslėpti akimirksniu:
.fadeOut();
Taip pat antruoju parametru galima perduoti sklandumo funkciją, o trečiuoju callback funkciją - suveiks po animacijos vykdymo. Abu parametrai nėra privalomi:
.fadeOut(trukme, [sklandumo funkcija], [callback funkcija]);
Metodui galima perduoti įvairias parinktis, JavaScript objekto pavidalu, kuriame yra poros raktas: reikšmė:
.fadeOut(options);
Tokiame objekte gali būti perduodami šie
parametrai ir funkcijos - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Aprašymą
šių parametrų galite peržiūrėti metodui
animate. Pavyzdžiui,
nustatykime trukmę ir sklandumo funkciją:
.fadeOut( {duration: 800, easing: easeInSine} );
Pavyzdys
Šiame pavyzdyje paspaudus mygtuką
#hide elementas su #test bus
paslėptas naudojant metodą fadeOut,
o mygtuką #show - rodytas, su
metodu fadeIn. Taip pat nustatysime
greitį į 1000ms:
<button id="hide">paslė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
Šiame pavyzdyje po animacijos pabaigos
rodant elementą #test mes
išvesime pranešimą
su tekstu '!', o slepiant
su tekstu '?':
<button id="hide">paslė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('?');
});
});
