清除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动画更换剧本，而是使它落后更

任何帮助表示赞赏！

Answer 1

让你的循环是这样的......

在if块添加clearInterval(looping);作为第一行中loop()。你可以试试吗？即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(); 
    } 
}