지우기 setInterval 문제

Question

브라우저 지연없이 Safari에서 여러 애니메이션을 실행하는 데 어려움이 있습니다. 내 애니메이션은 다른 모든 브라우저에서 원활합니다.

var looping; 

function loop() 
{ 
    var scrollTop = $(window).scrollTop(); 
    if(scrollTop > 300 && scrollTop < 1001) 
    { 
     looping = setInterval(function() 
     { 
      $('.page.active .strip').stop().animate(
      { 
       'background-position': '-=100px' 
      },1000,'linear'); 
     },1000); 
    } 
    else if(scrollTop < 301 || scrollTop > 1000) 
    { 
    clearInterval(looping); 
    $('.page.active .strip').stop(); 
    } 
} 

내가 달성하기 위해 노력하고있어 무한 회전 이미지를 만드는 것입니다 :

나는 내 스크립트를 함께 할 수있는 뭔가가 있는지 확실하지 않다.

내가 애니메이션을 정지 할 수있는 다음과 같은 두 시도 :

clearInterval(looping); 
$('.page.active .strip').stop(); 

작동하지 않습니다. 위에서 볼 수 있듯이 사용자가 스트립을 볼 수있게되면 애니메이션이 실행되기를 원합니다.

동시에이 애니메이션을 실행하고 있습니다.

function loadLandingSlider() 
{ 
    totalImg = $('.page.active #rotating-item-wrapper img').length; 

    rotate = setInterval(
    function() 
    { 
     loadImg(); 
    }, 3000); 
} 

function loadImg() 
{ 
    $('.page.active .rotating-item').fadeOut(1000); 
    $('.page.active #rot' + counter).fadeIn(1000); 

    if(counter == totalImg) counter = 1; 
    else counter ++; 
} 

이

내가 CSS3 애니메이션과 스크립트를 교체 시도 단지 기본 이미지 페이드 아웃 갤러리,하지만 그게

어떤 도움을 주시면 감사도 더 지연했다!

이 loop()의 경우 블록의 첫 번째 행으로 clearInterval(looping);을 추가

Answer 1

루프는 다음과 같이하십시오 .... 해볼 수 있니? 즉 if 및 else 블록 모두에서 clearInterval(looping);입니다.

var looping; 

function loop() 
{ 
    var scrollTop = $(window).scrollTop(); 
    clearInterval(looping); 
    if(scrollTop > 300 && scrollTop < 1001) 
    { 
    looping = setInterval(function() 
    { 
     $('.page.active .strip').stop().animate(
     { 
      'background-position': '-=100px' 
     },1000,'linear'); 
    },1000); 
    } 
    else if(scrollTop < 301 || scrollTop > 1000) 
    { 
    $('.page.active .strip').stop(); 
    } 
}