Metoda fadeOut

Metoda fadeOut ascunde elementele în mod gradual. Elementele pot fi afișate folosind metoda fadeIn, făcându-le opace.

Sintaxă

Afișarea pe o durată specificată, 400ms în mod implicit:

javascript.fadeOut(durată);

Timpul poate fi specificat nu doar în milisecunde, ci și prin cuvintele cheie slow (600ms) și fast (200ms), cu cât valoarea este mai mare, cu atât animația este mai lentă:

javascript.fadeOut('slow' sau 'fast');

Dacă nu sunt specificați parametri - animația nu va avea loc, elementele vor fi ascunse instantaneu:

javascript.fadeOut();

De asemenea, poți transmite un al doilea parametru, o funcție de easing, și un al treilea parametru, o funcție callback - care se va executa după finalizarea animației. Ambii parametri sunt opționali:

javascript.fadeOut(durată, [funcție de easing], [funcție callback]);

I se pot transmite metodei diverse opțiuni, sub forma unui obiect JavaScript, care conține perechi cheie: valoare:

javascript.fadeOut(opțiuni);

Un astfel de obiect poate transmite următorii parametri și funcții - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Descrierea acestor parametri o poți consulta pentru metoda animate. De exemplu, să setăm durata și funcția de easing:

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

Exemplu

În următorul exemplu, la click pe butonul #hide elementul cu #test va fi ascuns folosind metoda fadeOut, iar la click pe butonul #show - va fi afișat, cu ajutorul fadeIn. De asemenea, vom seta viteza la 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);
});

Exemplu

Iar în următorul exemplu, după finalizarea animației la afișarea elementului #test vom afișa un mesaj cu textul '!', iar la ascundere cu textul '?':

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('?');
  });
});

Vezi și