Animazione in loop con Jquery

jQuery è una delle più popolari librerie JavaScript cross-browser studiata per semplificare all’estremo lo scripting lato client sulle varie piattaforme.

Con Jquery anche i meno esperti di programmazione hanno la possibilità di creare animazioni ed effetti dinamici, gestire eventi ed interattività, selezionare elementi DOM tramite query CSS e sviluppare web application Ajax in pochi minuti.

Giusto per fornire un esempio delle potenzialità di questa libreria, eccovi un animazione in loop da aggiungere in un attimo a qualsiasi elemento HTML.

Come prima cosa dobbiamo importare la libreria Jquery nelle nostre pagine, per farlo possiamo accedere al sito Jquery.com e scaricare una delle 2 versioni, Production (compressa, consigliata per iniziare) o Development (non compressa, per sviluppatori), quindi inseriamo il codice

all’interno della pagina in cui vogliamo utlizzarla.

Passiamo a creare la funzione da richiamare, questa conterrà la nostra animazione: internamente alla funzione inseriamo un’unica riga di codice utilizzando il wrapper Jquery:

Utilizzando il chaining (concatenazione) dei metodi di Jquery nascondiamo prima l’elemento selezionato, quindi attiviamo un fadeIn di 2 secondi per farlo comparire, finito questo attendo mezzo secondo tramite il metodo delay() e come ultima cosa avvio il fadeOut per far ricomparire l’elemento.
Come secondo parametro del metodo fadeOut passo la funzione callback, che verrà richiamata al termine dell’animazione: questa funzione è la stessa che include il codice Jquery, creando così il ciclo d’animazione o loop.

Per ultima cosa richiamo semplicemente la funzione animazione: potete attivarla tramite qualsiasi evento, tipo il click di un bottone, come nell’esempio a seguire.

Ritieni questo post utile o interessante?
Condividi e Segnala