Metoda fadeTo

Metoda fadeTo modifică treptat opacitatea unui element până la o valoare specificată, în intervalul de la 0 la 1.

Sintaxă

Durata și opacitatea sunt specificate în orice variantă de utilizare a metodei. Modificarea opacității în timpul specificat, 400ms implicit:

javascript.fadeTo(durată, valoare opacitate);

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.fadeTo('slow' sau 'fast', valoare opacitate);

De asemenea, se poate transmite un al treilea parametru (opțional) o funcție callback - se execută după finalizarea animației:

javascript.fadeTo(durată, valoare opacitate, [funcție callback]);

De asemenea, se pot transmite funcția de easing și funcția callback (parametri opționali) - se execută după finalizarea animației:

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

Exemplu

În exemplul următor, folosind metoda fadeTo la apăsarea butonului #hide elementul cu #test va fi ascuns prin scăderea opacității până la 0.5, iar la #show - va fi afișat:

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').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
  $('#test').fadeTo(1000, 0.5);
});

Vezi și