Metoda slideDown

Metoda slideDown płynnie pokazuje ukryte elementy, rozwijając je od góry do dołu. Ukryć elementy można za pomocą metody slideUp.

Składnia

Pokazanie w zadanym czasie, 400ms domyślnie:

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

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

Jeśli nie podasz parametrów - animacja nie wystąpi, elementy pokażą się natychmiast:

.slideDown();

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

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

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

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

.slideDown( {duration: 600, easing: easeInSine} );

Przykład

Sprawmy, aby po naciśnięciu przycisku, płynnie pokazywać ukryty akapit za pomocą metody slideDown. Przekazując słowo kluczowe slow, ustawimy prędkość na 600ms. Po zakończeniu animacji wypiszemy do konsoli 'Animation complete':

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

$('button').click(function() {
	$('p').slideDown('slow', function() {
		console.log('Animation complete')
	});
});

Zobacz też

metoda slideUp,
która płynnie ukrywa elementy
metoda slideToggle,
która przełącza płynne pokazywanie/ukrywanie elementów
metoda fadeIn,
która płynnie pokazuje ukryte elementy, czyniąc je nieprzezroczystymi
metoda show,
która płynnie pokazuje elementy