Metoda slideUp

Metoda slideUp ascunde lin elementele, derulându-le de jos în sus. Afișarea elementelor se poate face cu ajutorul metodei slideDown.

Sintaxă

Ascunderea în timpul stabilit, 400ms implicit:

.slideUp(durată);

Timpul poate fi stabilit nu doar în milisecunde, ci și prin cuvinte cheie slow (600ms) și fast (200ms), cu cât valoarea este mai mare, cu atât animația este mai lentă:

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

Dacă nu se specifică parametri - animație nu va fi, elementele se vor ascunde instantaneu:

.slideUp();

De asemenea, se poate transmite ca al doilea parametru o funcție de easing, și ca al treilea parametru o funcție callback - se va executa după finalizarea animației. Ambele parametri sunt opționale:

.slideUp(durată, [funcție de easing], [funcție callback]);

Metodei i se pot transmite diverse opțiuni, sub forma unui obiect JavaScript, care conține perechi cheie: valoare:

.slideUp(opțiuni);

Un astfel de obiect poate transmite următorii parametri și funcții - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Descrierea acestor parametri o puteți vedea pentru metoda animate. De exemplu, să stabilim durata și funcția de easing:

.slideUp( {duration: 800, easing: easeInSine} );

Exemplu

Hai să după apăsării butonului, să ascundem lin div-ul părinte, care conține inputul și butonul, cu ajutorul metodei slideUp (acest div îl vom găsi cu ajutorul metodei parent). Transmițând cuvântul cheie slow, vom stabili viteza la 600ms. În div-ul cu #test vom afișa inscripția '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');
	});
});

Vedeți și

metoda slideDown,
care afișează lin elementele
metoda slideToggle,
care alternează afișarea/ascunderea lină a elementelor
metoda fadeOut,
care ascunde lin elementele, făcându-le transparente
metoda hide,
care ascunde lin elementele