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.