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:

javascript.slideUp(kesto);

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

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

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

javascript.slideUp();

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

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

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

javascript.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:

javascript.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':

html<div>
  <button>hide text</button>
  <input type="text" value="aaa">
</div>
<div id="test"></div>

javascript$('button').click(function() {
  $(this).parent().slideUp('slow', function() {
    $('#test').text('Text is hidden');
  });
});

Katso myös