Slide degli elementi

In una precedente lezione, abbiamo visto come mostrare e nascondere gli elementi. Ora vediamo come farli apparire e nascondere con un'animazione di scorrimento.

Il metodo .slideUp()

Il metodo .slideUp() permette di nascondere un elemento selezionato con un'animazione. La sintassi è:

I parametri tempo e funzione sono facoltativi: il parametro tempo indica il tempo in millisecondi dell'animazione per nascondere l'elemento, ma si può utilizzare "fast" e "slow" (se tempo non viene indicato, la durata sarà quella predefinita). Il parametro funzione, invece, indica la funzione che deve essere eseguita dopo che l'animazione termina (per altri dettagli sulle funzioni, puoi leggere la lezione JavaScript delle funzioni).

Ecco un esempio di .slideUp():

<button onclick="chiudiMenu()">Mostra il testo</button>
<p id="testo" style="background-color:yellow;padding:20px">Un esempio di testo</p>

<script>
function chiudiMenu(){
  $("#testo").slideUp();
}
</script>

Parametri facoltativi

Come abbiamo visto prima, il metodo .slideUp() accetta parametri aggiuntivi: il tempo e la funzione da eseguire. Vediamo un esempio:

<button onclick="chiudiMenu()">Mostra il testo</button>
<p id="testo" style="background-color:yellow;padding:20px">Un esempio di testo</p>

<script>
function chiudiMenu(){
  $("#testo").slideUp("fast", function(){
    alert("Hai nascosto il testo!");
  });
}
</script>

Il metodo .slideDown()

Il metodo .slideDown() funziona allo stesso modo di .slideUp(), ma mostra l'elemento invece di nasconderlo, sempre con un'animazione di scorrimento. La sintassi rimane la stessa:

I parametri tempo e funzione non sono obbligatori e rappresentano, come prima, il tempo in millisecondi (puoi usare anche "slow" e "fast") e la funzione che deve essere eseguita successivamente.

Ecco un esempio di .slideDown():

<button onclick="apriMenu()">Mostra il testo</button>
<p id="testo" style="background-color:yellow;padding:20px;display:none">Un esempio di testo</p>

<script>
function apriMenu(){
  $("#testo").slideDown();
}
</script>

Parametri facoltativi

Anche in questo caso, posso inserire i parametri facoltativi: il tempo e la funzione.

Il metodo .slideToggle()

Il metodo .slideToggle() unisce entrambi i metodi visti precedentemente. Se l'elemento è visibile, lo nasconde; se l'elemento è nascosto, lo mostra; sempre con l'animazione di scorrimento. Ha la stessa sintassi dei metodi precedenti:

Il parametro tempo indica il tempo in millisecondi della durata dell'animazione, il parametro funzione indica la funzione da eseguire al termine dell'animazione. 

Vediamo un esempio:

<button onclick="apriMenu()">Mostra/Nascondi il testo</button>
<p id="testo" style="background-color:yellow;padding:20px;display:none">Un esempio di testo</p>

<script>
function apriMenu(){
  $("#testo").slideToggle();
}
</script>