Effetto lampeggiante con jQuery

Fino ad ora un problema non indifferente investiva chi voleva con semplicità e senza appesantire caricamento e dimensioni della pagina inserire un semplice effetto di lampeggiamento di div, immagini, testo e chi più ne ha più ne metta.

Dall’11 novembre di quest’anno, 2010, ogni problema è risolto con l’uscita della nuova versione di jQuery: la versione 1.4.4!

Cercando una funzione che andasse bene alle mie esigenze ho scrutato ogni angolo del web cercando di far lampeggiare una semplice immagine, trovando ogni sorta di tentativi, sia javascript che jQuery, ottenendo però pagine pesanti al caricamento e la maggior parte delle volte avvisi di interruzione di script andato in loop. Allora mi son messo buono buono a cercare sulla documentazione ufficiale di jQuery trovando

toggle()

che però mi faceva scomparire a lato l’immagine e non era l’effetto che volevo. Ho provato a creare un’animazione personalizzata ma anche lì script pesantino da far sopportare ai browser. Alla fine mi cade l’occhio su una funzione:

fadeToggle()

La provo ma non succede nulla. Cerco di capire come mai e anche lì per caso vedo che la versione di jQuery richiesta mi è nuova: 1.4.4. Io avevo nei miei script la 1.3.2, utilizzata da molti per tools e librerie completi di jQuery.

Sostituendo il collegamento a jquery con il nuovo (google):

https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

ho creato una funzione che mi desse la possibilità di avere un effetto lampeggiante  infinito (flashing blinking) su qualsiasi cosa. Ecco a voi il codice:

function flash(classe) {
$("."+classe).fadeToggle(2000,function(){
flash(classe);
});
}

$(document).ready(function(){
flash('NOMECLASSE');
});

Analizzando: creiamo una classe ‘flash’ che analizza in automatico, con ‘fadeToggle’, se l’oggetto è visibile o meno e agisce di conseguenza, mostrandolo o nascondendolo. Il 2000 che si trova subito dopo indica i millisecondi che impiega per completare l’animazione, in questo caso 2 secondi. Una volta terminata l’azione richiama nuovamente la stessa classe, ottenendo l’effetto desiderato.

Per far ‘partire’ questa classe bisogna richiamarla una volta che la pagina è stata caricata completamente, grazie a

$(document).ready()

NOMECLASSE  sarà il nome della classe per la quale vorrete creare l’effetto (sostituitelo con il nome della vostra classe, e basterà sostituirlo solo lì!). Utilizzando questo metodo potrete inserire più campi al quale dare l’effetto.
Se volete cambiare il puntamento dalla classe all’id di un oggetto, basterà cambiare il punto nella seconda riga prima di +classe (“.”) con un asterisco (“#”+classe) in quanto il punto significa ‘classe’ mentre l’id viene identificato con ‘#’.

Divertitevi!

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: