Metoda toggle

Metoda toggle naprzemiennie płynnie pokazuje/ukrywa elementy. Jeśli element jest pokazany, to zostanie ukryty i na odwrót.

Składnia

Pokazywanie przez zadany czas w milisekundach, 400ms domyślnie:

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

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

Można parametrem display przekazywać wartość true lub false. Jeśli true, to element będzie tylko pokazywany, false - ukrywany:

.toggle(display);

Jeśli nie podawać parametrów - animacji nie będzie, elementy będą pokazywane/ukrywane natychmiast:

.toggle();

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

.toggle(duration, [funkcja płynności], [funkcja callback]);

Można po prostu drugim opcjonalnym parametrem przekazać funkcję callback - wykona się po zakończeniu animacji:

.toggle(duration, [funkcja callback]);

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

.toggle(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 długość i funkcję płynności:

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

Przykład

Zróbmy tak, aby po naciśnięciu przycisku, płynnie pokazywać ukryty akapit za pomocą metody toggle. Przekazując słowo kluczowe slow, ustawimy prędkość na 600ms. Po ponownym naciśnięciu - ukrywać:

<button>pokaż tekst</button>
<p style="display: none">tekst</p>

$('button').click(function() {
	$('p').toggle('slow');
});

Zobacz też

metoda fadeToggle,
która zmienia przezroczystość elementów
metoda slideToggle,
która naprzemiennie płynnie pokazuje/ukrywa elementy
metoda show,
która płynnie pokazuje elementy
metoda hide,
która płynnie ukrywa elementy