jquery animate running laggy - jquery, jquery-animate

Sto cercando di creare una freccia lampeggiante. Tuttavia quando eseguo questo script in browser diversi si comporta male. IE dice che non ha memoria, Chrome resta indietro per un secondo e poi si comporta bene e in Firefox l'animazione è appiccicosa.

Spero che qualcuno possa trovare un modo per animare senza problemi una freccia lampeggiante. Grazie

aniPointer($("#arrow"));

function aniPointer(point) {
point.animate({opacity: 1.0}, {duration: 300})
.animate({opacity: 0.2}, {duration: 700})
.animate({opacity: 0.2}, {duration: 300})
.animate({opacity: 1.0}, {duration: 300, complete: aniPointer(point)})
}

risposte:

4 per risposta № 1

Stai creando un ciclo infinito, lo hai fatto intenzionalmente, ma è molto più veloce di quanto pensi. complete prende un riferimento di funzione. Aggiungendo i paren al nome della funzione di callback che stai invocando aniPointer immediatamente e passando il valore di ritorno a complete invece di passare un riferimento a aniPointer stesso da licenziare in un secondo momento.

Anche così, questa sequenza è davvero ciò che vuoi fare?

Stai facendo:

go to 1.0 over 300ms
go to 0.2 over 700ms
go to 0.2 over 300ms
go to 1.0 over 300ms
repeat

Supponendo che stai iniziando a 1.0 questo è in realtà:

wait 300ms
go to 0.2 over 700ms
wait 300ms
go to 1.0 over 300ms
repeat

Se stai cercando un impulso costante, potresti fare qualcosa del genere:

function pulse($elem) {
return window.setInterval(function() {
$elem.animate({opacity: 0.2}, 700)
.animate({opacity: 1.0}, 300);
}, 1000);
}

Oppure se stavi facendo una pausa intenzionalmente potresti fare:

function pulse($elem) {
return window.setInterval(function() {
$elem.animate({opacity: 0.2}, 700);
window.setTimeout( function() {
$elem.animate({opacity: 1.0}, 300);
}, 1000);
}, 1600);
}

Il valore di ritorno ti permetterebbe di interrompere l'animazione se volessi:

var pulseIntervalId = pulse( $("#arrow_id") );

//some time later...
window.clearInterval(pulseIntervalId);

Entrambe le versioni supererebbero il problema del ciclo infinito, consentendo alla callback di avere il riferimento all'elemento pulsante senza essere invocato prematuramente.

---

3 per risposta № 2

La risposta di jasongetsdown, sebbene tecnicamente corretta, non è molto jQuery-esque, ma ha anche il problema che se il animate richiede un tempo leggermente più lungo di quello che dovrebbe, il window.setTimeout Non ci si preoccupa di eseguire una seconda istanza in parallelo, il che potrebbe portare a tutti i tipi di problemi, quindi è meglio attendere il completamento della chiamata animata prima di attivarne una nuova.

Ecco un'altra soluzione:

$.fn.pulse = function(lowOpacity, highOpacity) {
if (isNaN(+lowOpacity)) lowOpacity = 0.2;
if (isNaN(+highOpacity)) highOpacity = 1;
var that = this;
(this)
.delay(300)
.animate({opacity: lowOpacity}, 700)
.delay(300)
.animate({opacity: highOpacity}, 300, function() { that.pulse(lowOpacity, highOpacity); });
}

Per usarlo si farebbe:

$("#elem").pulse();

Per fermarlo dovresti fare:

$("#elem").stop().clearQueue();

---