Metoda fadeOut
Metoda fadeOut ascunde
elementele în mod gradual. Elementele pot fi afișate folosind metoda
fadeIn,
făcându-le opace.
Sintaxă
Afișarea pe o durată specificată,
400ms în mod implicit:
.fadeOut(durată);
Timpul poate fi specificat nu doar în milisecunde,
ci și prin cuvintele cheie slow (600ms)
și fast (200ms), cu cât valoarea este mai mare,
cu atât animația este mai lentă:
.fadeOut('slow' sau 'fast');
Dacă nu sunt specificați parametri - animația nu va avea loc, elementele vor fi ascunse instantaneu:
.fadeOut();
De asemenea, poți transmite un al doilea parametru, o funcție de easing, și un al treilea parametru, o funcție callback - care se va executa după finalizarea animației. Ambii parametri sunt opționali:
.fadeOut(durată, [funcție de easing], [funcție callback]);
I se pot transmite metodei diverse opțiuni, sub forma unui obiect JavaScript, care conține perechi cheie: valoare:
.fadeOut(opțiuni);
Un astfel de obiect poate transmite următorii
parametri și funcții - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Descrierea
acestor parametri o poți consulta pentru metoda
animate. De exemplu,
să setăm durata și funcția de easing:
.fadeOut( {duration: 800, easing: easeInSine} );
Exemplu
În următorul exemplu, la click pe butonul
#hide elementul cu #test va fi
ascuns folosind metoda fadeOut,
iar la click pe butonul #show - va fi afișat, cu
ajutorul fadeIn. De asemenea, vom seta
viteza la 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);
});
Exemplu
Iar în următorul exemplu, după finalizarea
animației la afișarea elementului #test vom
afișa un mesaj
cu textul '!', iar la ascundere
cu textul '?':
<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('?');
});
});
