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:

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

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

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

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

<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

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

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

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

Vezi și

metoda fadeToggle,
care modifică opacitatea elementelor
metoda fadeIn,
care afișează treptat elementele ascunse, făcându-le opaque
metoda animate,
care animează proprietățile elementelor