Pausa tra gli effetti con jQuery

Si potrebbe avere la necessità di creare una serie di effetti ma distanziarli l’uno dall’altro di n. secondi. Come fare?

Con l’evento .delay() si ottiene una pausa di n. millisecondi inseriti tra le tonde:

$("#msg").show().delay(2000).hide();

In questa riga si ottiene una visualizzazione del campo con id msg, 2 secondi di pausa e poi scompare.

In alternativa si può creare una funzione con jQuery e inserirla come un qualsiasi altro evento. Ecco come:

<script type="text/javascript">
$.fn.pause = function(duration) {
$(this).animate({ dummy: 1 }, duration);
return this;
};
</script>

Per usarlo basterà usare: .pause(5000) per avere una pausa di 5 secondi tra un effetto ed un altro.
Di seguito un esempio di una serie di effetti che permette ad un messaggio di essere mostrato mentre compare dall’alto, fermo per 5 secondi e poi fatto scomparire nuovamente (il div avrà come id “msg”):

$("#msg").hide();
$(document).ready( function(){
$("#msg").slideDown();
$("#msg").pause(5000).slideUp();
});

Andando per ordine: prima lo nascondiamo, poi quando il documento è pronto lo facciamo comparire. Con il nuovo evento .pause fermiamo l’effetto successivo (il div scomparirà verso l’alto) per 5 secondi così da poter leggere bene il messaggio al suo interno.

Con tutti e due i metodi si ottiene lo stesso risultato. Il secondo può essere personalizzato (dai più esperti o ambiziosi), così da creare una pausa personalizzata (magari mettendo un impulso continuo all’oggetto o facendolo cambiare di colore).

Annunci

, , , , , ,

  1. Lascia un commento

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: