Metod fadeOut
Metod fadeOut postepeno skriva
elemente. Prikazati elemente možete pomoću metoda
fadeIn,
čineći ih neprovidnim.
Sintaksa
Prikaz tokom zadatog vremena,
400ms podrazumevano:
.fadeOut(trajanje);
Vreme možete zadavati ne samo u milisekundama,
već i ključnim rečima slow (600ms)
i fast (200ms), što je veća vrednost,
to je animacija sporija:
.fadeOut('slow' ili 'fast');
Ako ne navedete parametre - animacija neće biti, elementi će se skriti trenutno:
.fadeOut();
Takođe možete kao drugi parametar proslediti funkciju ubrzanja (easing), a kao treći callback-funkciju - koja se poziva nakon izvršavanja animacije. Oba parametra su opciona:
.fadeOut(trajanje, [funkcija ubrzanja], [callback-funkcija]);
Metodu možete proslediti različite opcije, u obliku JavaScript objekta, koji sadrži parove ključ: vrednost:
.fadeOut(options);
Takav objekat može da sadrži sledeće
parametre i funkcije - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Opis
ovih parametara možete pogledati za metod
animate. Na primer,
podesimo trajanje i funkciju ubrzanja:
.fadeOut( {duration: 800, easing: easeInSine} );
Primer
U sledećem primeru pri kliku na dugme
#hide element sa #test će se
skriti pomoću metoda fadeOut,
a pri kliku na dugme #show - prikazati, sa
pomoću fadeIn. Takođe ćemo podesiti
brzinu na 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);
});
Primer
A u sledećem primeru nakon završetka
animacije pri prikazu elementa #test mi
ćemo ispisati poruku
sa tekstom '!', a pri skrivanju
sa tekstom '?':
<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('?');
});
});
