jquery - 清除setInterval问题

在没有浏览器落后的情况下，在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动画替换脚本，但这使它滞后了

任何帮助表示赞赏！

最佳答案

使您的循环看起来像这样...

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