Ho eseguito ogni tipo di ricerca su google e ho scoperto che:
$("div").effect("pulsate", { times:4 }, 2000);
- In molti hanno avuto il mio stesso problema, ma nessuno ha trovato la soluzione.
- Esiste una funzione queue in jQuery, ma non ho capito a cosa serve e come si usa.
- Esiste una funzione animate, con la quale si possono fare dei giochini interessanti e con la quale ho risolto il mio problema.
Anzitutto ho fatto una funzione che riproduce l'effetto pulsate di cui sopra:
e l'ho messa come callback di animate.
function animateIt() {
$("div").animate({ opacity: 'toggle' }, 2000, 'linear', animateIt);}
Il risultato in questo caso è che si fa il toggle animato della proprietà opacity, quindi in 2 secondi il div lampeggia e sparisce e poi richiama a funzione e in due secondi lampeggia e riappare.
Il nocciolo della questione è ora stoppare questo effetto:
$("div").stop();Basta eseguire questa semplice istruzione per fermare l'animazione. Questo introduce un piccolo bug. Quando si ferma l'animazione l'opacità del div è la stessa al momento dello stop, perciò se si stoppa in un momento in cui il div è invisibile il div rimane invisibile ( e potrebbe essere utile in alcuni casi), se si vuole semplicemente togliere l'effetto di mostra/nascondi basta rimuovere l'attributo style che viene aggiunto dall'animazione
$("div").removeAttr("style");