jQuery: slideUp() e slideDown() due effetti mostrare e nascondere un elemento.

Tramite i metodi slideUp() e slideDown() possiamo rispettivamente nascondere o mostare un elemento.
La visualizzazione dell’elemento selezionato avviene con un scorrimento verso il basso, mentre quando un elemento scompare scorre verso l’alto fino a sparire.

Per vedere una demo:
http://demo.studio-88.it/slide/


Il funzionamento è veramente semplice, prima cosa aggiungiamo i bottoni:

 

Poi nell’head aggiungiamo il codice jQuery:

$(document).ready(function(){
    $("#upBnt").click(function(){$("#box").slideUp()});
    $("#dwBnt").click(function(){$("#box").slideDown()});
});

Qui abbiamo chiamato i metodi slideUp() e slideDown() senza alcun parametro, in reltà ad entrambe le funzioni possiamo passare un valore che indica la durata dell’animazione, se il valore è numerico gli stiamo passando la durata della transizione in millisecondi, quindi per avere in slide up di un secondo dovremmo scrivere:

$("#upBnt").click(function(){$("#box").slideUp(1000)});

Se, come fatto nel primo esempio, non passiamo nessun valore l’animazione durerà 400 millisecondi.
Inoltre possiamo anche scrivere:

$(document).ready(function(){
    $("#upBnt").click(function(){$("#box").slideUp('fast')});
    $("#dwBnt").click(function(){$("#box").slideDown('slow')});
});

Dove fast “dura” 200 millisecondi e slow “dura” 600.