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:

javascript.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:

javascript.fadeIn('slow' ili 'fast');

Ako se parametri ne navedu - neće biti animacije, elementi će se prikazati trenutno:

javascript.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:

javascript.fadeIn(trajanje, [funkcija ublažavanja], [callback funkcija]);

Metodu se mogu proslediti različite opcije, u obliku JavaScript objekta, koji sadrži parove ključ: vrednost:

javascript.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:

javascript.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:

html<button id="hide">sakrij</button>
<button id="show">prikaži</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#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 '?':

html<button id="hide">sakrij</button>
<button id="show">prikaži</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

Pogledajte takođe