Metoda fadeOut

Metoda fadeOut postopno skrije elemente. Prikazati elemente je mogoče z metodo fadeIn, tako da jih naredi neprosojne.

Sintaksa

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

javascript.fadeOut(trajanje);

Čas je mogoče nastaviti 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.fadeOut('slow' ali 'fast');

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

javascript.fadeOut();

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

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

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

javascript.fadeOut(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.fadeOut( {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">hide</button>
<button id="show">show</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">hide</button>
<button id="show">show</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