Ritardare l'esecuzione in jQuery

Nelle scorse lezioni, abbiamo visto come animare gli elementi e come terminare le animazioni. In questa lezione, vediamo come ritardare l'esecuzione degli elementi utilizzando il metodo .delay().

Il metodo .delay()

Il metodo .delay() permette di ritardare di un determinato periodo di tempo l'elemento successivo in coda (approfondiamo meglio nella nota grigia, dopo l'esempio).

La sintassi è: $(selettore).delay(tempo, coda). Vediamo quali sono i parametri da utilizzare:

Vediamo un esempio:

<button id="btn">Nascondi</button>
<div id="es" style="width:200px;height:50px;background-color:green"></div>

<script>
$("#btn").click(function(){
    $("#es").delay(1000).slideUp();
});
</script>

Nell'esempio, l'esecuzione di .slideUp() (che abbiamo visto in questa lezione) viene ritardata di 1 sec (1000 millisecondi). Grazie ad un evento di click, quando l'utente clicca sul pulsante, viene eseguita la funzione.

Nota: per funzionare, .delay() deve essere inserito prima della funzione. Ad esempio, .delay().slideUp(). Se viene inserito dopo il metodo, non avrà effetto (non scrivere: .slideUp().delay()).

Più ritardi insieme

Vediamo un esempio con effetti differenti in coda, ritardati da .delay().

<button id="btn">Nascondi e mostra</button>
<div id="es" style="width:200px;height:50px;background-color:green"></div>

<script>
$("#btn").click(function(){
    $("#es").delay("fast").slideUp().delay(2000).slideDown();
});
</script>

Nell'esempio, il metodo .slideUp() ha un breve ritardo (con fast), mentre .slideDown() ha un ritardo di due secondi.