Metod slideUp

Metod slideUp postepeno sakriva elemente, smotavajući ih odozdo prema gore. Prikazati elemente možemo pomoću metoda slideDown.

Sintaksa

Sakrivanje u zadatom vremenskom periodu, 400ms podrazumevano:

.slideUp(trajanje);

Vreme možemo zadati ne samo u milisekundama, već i ključnim rečima slow (600ms) i fast (200ms), što je veća vrednost, to je sporija animacija:

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

Ako ne navedemo parametre - animacija neće postojati, elementi će se sakriti momentalno:

.slideUp();

Takođe možemo kao drugi parametar proslediti funkciju ublažavanja (easing), a kao treći callback funkciju - izvršiće se nakon završetka animacije. Oba parametra su opcionalna:

.slideUp(trajanje, [funkcija ublažavanja], [callback funkcija]);

Možemo proslediti metodu različite opcije, u obliku JavaScript objekta, koji sadrži parove ključ: vrednost:

.slideUp(opcije);

Ovakav objekat može da sadrži sledeće parametre i funkcije - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Opis ovih parametara možete pogledati za metod animate. Na primer, podesićemo trajanje i funkciju ublažavanja:

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

Primer

Hajde da nakon klika na dugme, postepeno sakrijemo roditeljski div, koji sadrži input i dugme, pomoću metoda slideUp (ovaj div naći ćemo pomoću metoda parent). Prosleđivanjem ključne reči slow, podešćemo brzinu na 600ms. U div sa #test ispisaćemo natpis 'Text is hidden':

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

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

Pogledajte takođe

metod slideDown,
koji postepeno prikazuje elemente
metod slideToggle,
koji naizmenično postepeno prikazuje/sakriva elemente
metod fadeOut,
koji postepeno sakriva elemente, čineći ih providnim
metod hide,
koji postepeno sakriva elemente