slideDown-metodi

slideDown-metodi näyttää sulavasti piilotetut elementit vierittämällä ne ylhäältä alas. Elementit voidaan piilottaa käyttämällä slideUp-metodia.

Syntaksi

Näyttö annetussa ajassa, 400ms oletusarvoisesti:

.slideDown(kesto);

Aikaa voi asettaa ei vain millisekunteina, vaan myös avainsanoilla slow (600ms) ja fast (200ms), mitä suurempi arvo, sitä hitaampi animaatio:

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

Jos parametreja ei määritetä - animaatiota ei tule, elementit näytetään välittömästi:

.slideDown();

Voidaan myös toisena parametrina antaa easing-funktio, sekä kolmantena callback-funktio - suoritetaan animaation valmistumisen jälkeen. Molemmat parametrit ovat valinnaisia:

.slideDown(kesto, [easing-funktio], [callback-funktio]);

Metodille voidaan antaa erilaisia asetuksia, JavaScript-objektin muodossa, joka sisältää avain: arvo -pareja:

.slideDown(options);

Tällainen objekti voi välittää seuraavia parametreja ja funktioita - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Näiden parametrien kuvauksen voit katsoa metodille animate. Esimerkiksi, asetetaan kesto ja easing-funktio:

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

Esimerkki

Painetun napin jälkeen, näytetään sulavasti piilotettu kappale slideDown-metodilla. Antamalla avainsanan slow, asetamme nopeudeksi 600ms. Animaation päätyttyä tulostamme konsoliin 'Animation complete':

<button>näytä teksti</button>
<p style="display: none">teksti</p>

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

Katso myös

metodi slideUp,
joka piilottaa elementit sulavasti
metodi slideToggle,
joka vuorottelee sulavan näytön/piilotuksen elementeistä
metodi fadeIn,
joka näyttää sulavasti piilotetut elementit, tekemällä niistä läpinäkyvättömiä
metodi show,
joka näyttää elementit sulavasti