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:

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

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

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

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

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

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

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

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

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

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

Zobacz też