Metoda slideUp

Metoda slideUp płynnie ukrywa elementy, zwijając je od dołu do góry. Pokaż elementy można za pomocą metody slideDown.

Składnia

Ukrywanie w zadanym czasie, 400ms domyślnie:

javascript.slideUp(duration);

Czas można ustawiać nie tylko w milisekundach, ale i słowami kluczowymi slow (600ms) i fast (200ms), im większa wartość, tym wolniejsza animacja:

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

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

javascript.slideUp();

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

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

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

javascript.slideUp(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.slideUp( {duration: 800, easing: easeInSine} );

Przykład

Zaraz po naciśnięciu przycisku, płynnie ukryjmy rodzicowski div, który zawiera input i przycisk, za pomocą metody slideUp (ten div znajdziemy za pomocą metody parent). Podając słowo kluczowe slow, ustawimy prędkość na 600ms. W div z #test wypiszemy napis 'Text is hidden':

html<div>
  <button>hide text</button>
  <input type="text" value="aaa">
</div>
<div id="test"></div>

javascript$('button').click(function() {
  $(this).parent().slideUp('slow', function() {
    $('#test').text('Text is hidden');
  });
});

Zobacz też