Metod fadeIn
Metod fadeIn postupno prikazuje skrivene
elemente, čineći ih neprovidnim. Sakriti
elemente je moguće pomoću metoda
fadeOut,
čineći ih providnim.
Sintaksa
Prikazivanje u određenom vremenskom periodu,
400ms podrazumevano:
.fadeIn(trajanje);
Vreme se može zadati ne samo u milisekundama,
već i ključnim rečima slow (600ms)
i fast (200ms), što je vrednost veća,
animacija je sporija:
.fadeIn('slow' ili 'fast');
Ako se parametri ne navedu - neće biti animacije, elementi će se prikazati trenutno:
.fadeIn();
Takođe se može drugim parametrom proslediti funkcija za ublažavanje (easing), a trećim i callback funkcija - koja se izvršava po završetku animacije. Oba parametra su opciona:
.fadeIn(trajanje, [funkcija ublažavanja], [callback funkcija]);
Metodu se mogu proslediti različite opcije, u obliku JavaScript objekta, koji sadrži parove ključ: vrednost:
.fadeIn(opcije);
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 ublažavanja:
.fadeIn( {duration: 800, easing: easeInSine} );
Primer
U sledećem primeru, kada se klikne na dugme
#hide element sa #test će se
sakriti pomoću metoda fadeOut,
a na dugme #show - prikazati, sa
pomoću fadeIn. Takođe ćemo postaviti
brzinu na 1000ms:
<button id="hide">sakrij</button>
<button id="show">prikaži</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 prikazivanju elementa #test, mi ćemo
prikazati poruku
sa tekstom '!', a pri skrivanju
sa tekstom '?':
<button id="hide">sakrij</button>
<button id="show">prikaži</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('?');
});
});
