Metoda fadeIn

Metoda fadeIn postopno prikaže skrite elemente, tako da postanejo neprozorni. Skriti elemente je mogoče z metodo fadeOut, tako da postanejo prozorni.

Sintaksa

Prikaz v določenem času, 400ms privzeto:

javascript.fadeIn(trajanje);

Čas je mogoče določiti ne le v milisekundah, ampak tudi s ključnimi besedami slow (600ms) in fast (200ms), večja kot je vrednost, počasnejša je animacija:

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

Če parametri niso določeni - animacije ne bo, elementi bodo prikazani takoj:

javascript.fadeIn();

Kot drugi parameter je mogoče posredovati tudi funkcijo zaubljanja, in kot tretji parameter callback funkcijo - se izvede po končani animaciji. Oba parametra sta neobvezna:

javascript.fadeIn(trajanje, [funkcija zaubljanja], [callback-funkcija]);

Metodi je mogoče posredovati različne možnosti, v obliki JavaScript objekta, ki vsebuje pare ključ: vrednost:

javascript.fadeIn(možnosti);

Tak objekt lahko posreduje naslednje parametre in funkcije - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Opis teh parametrov si lahko ogledate za metodo animate. Na primer, nastavimo trajanje in funkcijo zaubljanja:

javascript.fadeIn( {duration: 800, easing: easeInSine} );

Primer

V naslednjem primeru ob kliku na gumb #hide bo element z #test skrit z uporabo metode fadeOut, ob kliku na gumb #show pa bo prikazan, z uporabo fadeIn. Prav tako bomo nastavili hitrost na 1000ms:

html<button id="hide">skrij</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

V naslednjem primeru bomo po koncu animacije pri prikazu elementa #test izpisali sporočilo z besedilom '!', ob skrivanju pa z besedilom '?':

html<button id="hide">skrij</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('?');
  });
});

Glejte tudi