Metóda slideDown

Metóda slideDown plynulo zobrazí skryté prvky, roztiahnutím zhora nadol. Skryť prvky je možné pomocou metódy slideUp.

Syntax

Zobrazenie po zadaný čas, 400ms predvolené:

.slideDown(duration);

Čas je možné zadať nielen v milisekundách, ale aj kľúčovými slovami slow (600ms) a fast (200ms), čím vyššia hodnota, tým pomalšia animácia:

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

Ak nešpecifikujete parametre - animácia nebude, prvky sa zobrazia okamžite:

.slideDown();

Ako druhý parameter je možné odovzdať funkciu easingu, a ako tretí parameter callback funkciu - vykoná sa po dokončení animácie. Oba parametre sú voliteľné:

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

Metóde je možné odovzdať rôzne možnosti, vo forme JavaScript objektu, obsahujúceho páry kľúč: hodnota:

.slideDown(options);

Takýto objekt môže odovzdávať nasledujúce parametre a funkcie - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Popis týchto parametrov môžete pozrieť pre metódu animate. Napríklad, nastavíme trvanie a funkciu easingu:

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

Príklad

Po stlačení tlačidla plynulo zobrazme skrytý odsek pomocou metódy slideDown. Odovzdaním kľúčového slova slow nastavíme rýchlosť na 600ms. Po skončení animácie vypíšeme do konzoly 'Animation complete':

<button>zobraziť text</button>
<p style="display: none">text</p>

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

Pozri tiež

metóda slideUp,
ktorá plynulo skryje prvky
metóda slideToggle,
ktorá strieda plynulé zobrazenie/skrytie prvkov
metóda fadeIn,
ktorá plynulo zobrazí skryté prvky, urobí ich nepriehľadnými
metóda show,
ktorá plynulo zobrazí prvky