0

有点奇怪的标题，但这是我得到的。

我发现这个问题问了几次，但遮阳篷似乎对我来说不能正常工作

我得到的是一个上下弹跳以吸引您的注意力的页脚，当您将鼠标悬停在它上面时，它会展开并显示一个过滤器。

现在它在窗口中完美运行，但是当我移动到另一个选项卡并返回该站点时，它会依次播放所有弹跳。

我读过一篇文章，当在另一个选项卡中时，chrome 会减慢间隔以提高 cpu 速度。

我现在只在窗口设置为焦点时播放计时器，并在设置为模糊时禁用。但这不是 100% 的时间。

var $bounceInter = 6000;

function mycode() {
    if($bounceOn == true) {
            $("#footer").animate({bottom:"+=20px"},150, 'swing').animate({bottom:"-=20px"},150, 'swing').animate({bottom:"+=10px"},100, 'swing').animate({bottom:"-=10px"},100,"swing",function(){$("#footer").data("bouncing", false);});
    }
    clearTimeout($bounceTimer);
  $bounceTimer = setTimeout(mycode, $bounceInter); // repeat myself
}


$(window).focus(function() {
    $bounceTimer = setTimeout(mycode, $bounceInter);
});

$(window).blur(function() {
    clearTimeout($bounceTimer);
});

var $bounceTimer = setTimeout(mycode, $bounceInter);

还有其他可能的修复吗？

我从另一个人那里得到了退回代码，也许问题在那里？

4

1 回答 1

0

将该方法合并到requestAnimationFrame您的代码中。由于您的代码不完整（的作用是$bounceOn什么？可能设置在悬停或其他东西上），我将根据您的函数名称突出显示通用步骤。我删除了$前缀，因为按照惯例，它用于标记 jQuery 对象。

为方便起见，我们正在使用规范化 API，它使用本机（前缀）requestAnimationFrame方法和必要时的 polyfill。polyfill 由 Erik Moller 创建，可以在他的博客上找到。

// Minimum delay between each call
var bounceInter = 6000
  , raf
  , bounceTimer;

function nextAnimationStep() {
    raf = requestAnimationFrame(function() {
        // Code here (eg animation)
        bounceTimer = setTimeout(nextAnimationStep, bounceInter);
    });
}

// Initial step
nextAnimationStep();

// To cancel animation (to restart, just call `nextAnimationStep();` ):
cancelAnimationFrame(raf);
clearTimeout(bounceTimer);

这是您的动画，空白处已填满：http: //jsfiddle.net/exPeP/1。

于 2012-09-06T08:53:43.597 回答