jquery animate running laggy

Question

Я пытаюсь создать мигающую стрелку. Однако, когда я запускаю этот скрипт в разных браузерах, он ведет себя плохо. IE говорит, что его не хватает памяти, Chrome отстает на секунду, а затем ведет себя хорошо, а в firefox анимация липкая.

Надеюсь, что кто-то сможет разработать способ, которым я могу анимировать мигающую стрелку плавно. Thanks

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)}) 
    } 

Answer 1

Вы создаете бесконечный цикл. Вы сделали это намеренно, но он работает намного быстрее, чем вы думаете. complete выполняет функцию ссылки. Добавив parens к названию функции обратного вызова, вы немедленно вызываете aniPointer и передаете возвращаемое значение в complete вместо передачи ссылки на aniPointer, чтобы его уволили в более позднее время.

Даже так, это последовательность, что вы хотите сделать?

Вы делаете:

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 

Предполагая, что вы, начиная с 1,0 это на самом деле:

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

Если вы ищете для стационарного импульса вы могли бы сделать что-то вроде этого:

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

Или, если вы намеренно задержавшись вы могли бы сделать:

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

Возвращаемое значение позволит вам остановить анимацию, если вы хотите, чтобы выглядеть примерно так:

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

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

Либо вариант будет огибать вопрос бесконечного цикла, что позволяет обратный вызов, чтобы иметь ссылку на элемент пульсирующего не будучи вызванными преждевременно.

Answer 2

Ответ jasongetsdown, хотя технически правильный, не очень jQuery-esque. Кроме того, проблема состоит в том, что если animate занимает немного больше времени, чем это должно быть, window.setTimeout не будет заботиться и запускать второй экземпляр параллельно, что может привести к возникновению всех проблем, поэтому лучше дождаться завершения перед вызовом нового вызова.

Вот еще одно решение:

$.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); }); 
} 

Чтобы использовать его, вы должны сделать следующее:

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

Чтобы остановить его, вы должны сделать следующее:

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