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:

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

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

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

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

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

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

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

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

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

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

Zobacz też

metoda slideDown,
która płynnie pokazuje elementy
metoda slideToggle,
która przeplata płynne pokazywanie/ukrywanie elementów
metoda fadeOut,
która płynnie płynnie ukrywa elementy, czyniąc je przezroczystymi
metoda hide,
która płynnie ukrywa elementy