Metoda fadeTo

Metoda fadeTo płynnie zmienia przezroczystość elementu do określonej wartości, w zakresie od 0 do 1.

Składnia

Czas trwania i przezroczystość są określane przy dowolnym wariancie użycia metody. Zmiana przezroczystości w określonym czasie, 400ms domyślnie:

.fadeTo(czas trwania, wartość przezroczystości);

Czas można określać nie tylko w milisekundach, ale także słowami kluczowymi slow (600ms) i fast (200ms), im większa wartość, tym wolniejsza animacja:

.fadeTo('slow' lub 'fast', wartość przezroczystości);

Można także trzecim (opcjonalnym) parametrem przekazać funkcję callback - uruchomi się po wykonaniu animacji:

.fadeTo(czas trwania, wartość przezroczystości, [funkcja callback]);

Można także przekazywać funkcję easing i funkcję callback (parametry opcjonalne) - uruchomi się po wykonaniu animacji:

.fadeTo(czas trwania, wartość przezroczystości, [funkcja easing], [funkcja callback]);

Przykład

W następnym przykładzie, za pomocą metody fadeTo po naciśnięciu przycisku #hide element z #test będzie ukrywany poprzez zmniejszenie przezroczystości do 0.5, a po naciśnięciu #show - wyświetlany:

<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);
});

Zobacz także

metoda fadeToggle,
która zmienia przezroczystość elementów
metoda fadeIn,
która płynnie pokazuje ukryte elementy, czyniąc je nieprzezroczystymi
metoda animate,
która animuje właściwości elementów