Metoda fadeToggle

Metoda fadeToggle na przemian płynnie pokazuje lub ukrywa elementy, animując ich przezroczystość.

Składnia

Pokazywanie/ukrywanie w zadanym czasie, 400ms domyślnie:

.fadeToggle(duration);

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

.fadeToggle('slow' lub 'fast');

Jeśli nie podasz parametrów - animacja nie wystąpi, elementy będą pokazywane/ukrywane natychmiast:

.fadeToggle();

Można także jako drugi parametr przekazać funkcję płynności, a jako trzeci funkcję callback - wykona się po zakończeniu animacji. Oba parametry są opcjonalne:

.fadeToggle(duration, [easing], [callback]);

Metodzie można przekazać różne opcje, w postaci obiektu JavaScript, zawierającego pary klucz: wartość:

.fadeToggle(options);

Taki obiekt może przekazywać następujące parametry i funkcje - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Opis tych parametrów możesz zobaczyć dla metody animate. Na przykład, ustawmy czas trwania i funkcję płynności:

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

Przykład

W następnym przykładzie po pierwszym naciśnięciu przycisku #toggle element z #test będzie ukrywany, a po ponownym - pokazywany. W tym celu użyjemy metody fadeToggle. Również ustawimy prędkość na 1000ms i wartość funkcji płynności na linear:

<button id="toggle">toggle</button>
<div id="test"></div>

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

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

Zobacz też

metoda slideToggle,
która na przemian płynnie pokazuje/ukrywa elementy
metoda fadeTo,
która zmienia przezroczystość elementów
metoda toggle,
która na przemian płynnie pokazuje/ukrywa elementy
metoda animate,
która animuje właściwości elementów