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