mercoledì 28 settembre 2011

jquery (can't?) stop effect

Oggi mi sono scontrato con un limite di jQuery: non c'è modo di "stoppare" un effetto quando questo viene lanciato.

$("div").effect("pulsate", { times:4 }, 2000);
Ho eseguito ogni tipo di ricerca su google e ho scoperto che:

  • 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:

function animateIt() {

    $("div").animate({ opacity: 'toggle' }, 2000, 'linear', animateIt);
 }
 e l'ho messa come callback di animate. 
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");

Nessun commento:

Posta un commento