A slideUp metódus

A slideUp metódus simán rejt el elemeket, feltekerve őket alulról felfelé. Az elemeket a slideDown metódussal lehet megjeleníteni.

Szintaxis

Elrejtés a megadott idő alatt, alapértelmezetten 400ms:

.slideUp(duration);

Az időt nem csak ezredmásodpercben lehet megadni, hanem kulcsszavakkal is: slow (600ms) és fast (200ms), minél nagyobb az érték, annál lassabb az animáció:

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

Ha nem adunk meg paramétereket - nem lesz animáció, az elemek azonnal el fognak tűnni:

.slideUp();

A második paraméterként átadhatunk egy easing függvényt, valamint harmadikként egy callback függvényt - amely az animáció befejezése után fut le. Mindkét paraméter opcionális:

.slideUp(duration, [easing function], [callback function]);

Különböző beállításokat adhatunk át a metódusnak, JavaScript objektum formájában, amely kulcs: érték párokat tartalmaz:

.slideUp(options);

Egy ilyen objektum a következő paramétereket és függvényeket adhatja át - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Ezen paraméterek leírását a animate metódusnál találod. Például, állítsuk be az időtartamot és az easing függvényt:

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

Példa

A gomb megnyomása után, rejtsük el simán a szülő div-et, amely tartalmazza az inputot és a gombot, a slideUp metódussal (ezt a div-et a parent metódussal találjuk meg). A slow kulcsszó átadásával beállítjuk a sebességet 600ms-ra. A div elemben, a #test azonosítóval kiírjuk a 'Text is hidden' feliratot:

<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');
	});
});

Lásd még

a slideDown metódus,
amely simán megjelenít elemeket
a slideToggle metódus,
amely váltogatja a sima megjelenítés/elrejtés elemeket
a fadeOut metódus,
amely simán rejt el elemeket, azok átlátszóvá tételével
a hide metódus,
amely simán rejt el elemeket