jquery animate running laggy

Question

깜박이는 화살표를 만들려고합니다. 그러나 다른 브라우저에서이 스크립트를 실행하면 잘못 작동합니다. IE는 메모리 부족을 말하며 Chrome은 잠시 뒤쳐져서 제대로 작동하고 파이어 폭스에서는 애니메이션이 끈적 거립니다.

누군가가 내가 깜박이는 화살표를 부드럽게 움직일 수있는 방법을 찾아 낼 수 있기를 바랍니다. 감사합니다

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은 함수 참조를받습니다. 콜백 함수의 이름에 괄호를 추가하면 즉시 aniPointer을 호출하고 나중에 aniPointer에 대한 참조를 전달하는 대신 반환 값을 complete으로 전달합니다.

그럼에도 불구하고 그 시퀀스는 정말로 원하는 것입니까?

당신은 일을하는지 :

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은 두 번째 인스턴스를 병렬로 처리하지 않으므로 모든 문제가 발생할 수 있으므로 문제가 발생하는 경우 완료 될 때까지 기다리는 것이 좋습니다. 새 것을 실행하기 전에 호출에 애니메이션을 적용하십시오. 당신이 할 것

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

그것을 중지하려면 :

$.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').stop().clearQueue();