Metoda slideToggle
Metoda slideToggle płynnie pokazuje
ukryte elementy i ukrywa widoczne.
Składnia
Pokazywanie/ukrywanie w zadanym czasie,
400ms domyślnie:
.slideToggle(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:
.slideToggle('slow' lub 'fast');
Jeśli nie podasz parametrów - animacja nie wystąpi, elementy będą pokazywane/ukrywane natychmiast:
.slideToggle();
Można także jako drugi parametr przekazać funkcję easing, a jako trzeci funkcję callback - wykona się po zakończeniu animacji. Oba parametry są opcjonalne:
.slideToggle(duration, [easing], [callback]);
Metodzie można przekazać różne opcje, w postaci obiektu JavaScript, zawierającego pary klucz: wartość:
.slideToggle(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żna znaleźć dla metody
animate. Na przykład,
ustawmy czas trwania i funkcję easing:
.slideToggle( {duration: 600, easing: easeInSine} );
Przykład
Sprawmy, aby po naciśnięciu przycisku, płynnie ukryć
rodzica div, który zawiera akapity,
za pomocą metody slideToggle (tego div
znajdziemy za pomocą metody
parent),
po ponownym naciśnięciu przycisku, div zostanie
ponownie płynnie pokazany itd. Podając słowo kluczowe
slow, ustawimy prędkość na 600ms:
<button>toggle text</button>
<div>
<p id='test'>text text text text text text text</p>
<p>text text text text text text text</p>
<p>text text text text text text text</p>
</div>
$('button').click(function() {
$('#test').parent().slideToggle('slow');
});
