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 ++;
}

这只是一个基本的图片fadeOut gallery

我尝试用css3动画替换脚本，但这使得它更加滞后

任何帮助表示赞赏！

Answer 1

让你的循环看起来像这样......

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

清除setInterval问题

1 个答案: