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:

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

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

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

javascript.toggle(display);

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

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

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

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

javascript.toggle(duration, [funkcja callback]);

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

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

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

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

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

Zobacz też