slideUp-metodi

Metodi slideUp piilottaa elementit pehmeästi, vierittäen ne ylös alhaalta. Näyttää elementit voidaan metodilla slideDown.

Syntaksi

Piilottaminen annetulla ajalla, 400ms oletusarvoisesti:

.slideUp(kesto);

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

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

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

.slideUp();

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

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

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

.slideUp(options);

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

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

Esimerkki

Piilotetaan napin painamisen jälkeen, pehmeästi parent div, joka sisältää inputin ja napin, metodilla slideUp (tämän div:n löydämme metodilla parent). Antamalla avainsanan slow, asetamme nopeudeksi 600ms. div:iin, jossa on #test tulostamme tekstin 'Text is hidden':

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

Katso myös

metodi slideDown,
joka näyttää elementit pehmeästi
metodi slideToggle,
joka vuorottelee pehmeän näyttämisen/piilottamisen elementeistä
metodi fadeOut,
joka piilottaa elementit pehmeästi, tekemällä niistä läpinäkyviä
metodi hide,
joka piilottaa elementit pehmeästi