A slideDown metódus

A slideDown metódus lágyan megjeleníti az elrejtett elemeket, felülről lefelé gördítve azokat. Az elemek elrejtéséhez használható a slideUp metódus.

Szintaxis

Megjelenítés adott időtartam alatt, alapértelmezetten 400ms:

.slideDown(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ó:

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

Ha nincs paraméter megadva - nem lesz animáció, az elemek azonnal megjelennek:

.slideDown();

A második paraméterként átadható egy easing függvény, a harmadik paraméterként pedig egy callback függvény - amely az animáció befejezése után fut le. Mindkét paraméter opcionális:

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

Átadhatunk a metódusnak különböző opciókat, JavaScript objektum formájában, amely kulcs: érték párokat tartalmaz:

.slideDown(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 megtalálhatod a animate metódusnál. Például, állítsuk be az időtartamot és az easing függvényt:

.slideDown( {duration: 600, easing: easeInSine} );

Példa

Egy gomb megnyomására lágyan jelenítsük meg az elrejtett bekezdést a slideDown metódussal. A slow kulcsszó átadásával a sebességet 600ms-ra állítjuk. Az animáció befejezése után írjunk ki a konzolra 'Animation complete'-t:

<button>szöveg megjelenítése</button>
<p style="display: none">szöveg</p>

$('button').click(function() {
	$('p').slideDown('slow', function() {
		console.log('Animation complete')
	});
});

Lásd még

a slideUp metódus,
amely lágyan elrejti az elemeket
a slideToggle metódus,
amely váltogatja a lágy megjelenítést/elrejtést
a fadeIn metódus,
amely lágyan jeleníti meg az elrejtett elemeket azok átlátszatlanná tételével
a show metódus,
amely lágyan jeleníti meg az elemeket