（Jquery / Javascript）事件句柄 - 失去焦点

Question

这是我的问题，我正在开发一个个人网站，背景中有一个巨大的动画，云层在无限循环中移动。 一切都是通过jquery扩展与jquery计时器和精灵完成的。 | 首先它填写云起始位置矩阵（随机） | 它设置了每个云的实际位置。 | 开始使用.animate（）函数移动云，并启动计时器再次触发该动画，直到云到达左边界。 | 永远重复：）

无论如何这种方法消耗“小”内存和CPU，我正在尝试优化代码， 我想知道当浏览器切换到另一个页面时是否有调用函数的方法，以停止动画。

感谢。

另外，如果有人帮助优化代码，我会非常感激！ :) 如果有人可以提供帮助，我会将链接发布到网站上。 再次感谢

Answer 1

首先，确保为单个 DOM元素设置动画，而不是一堆单独的云。将你的云放入容器并移动后者。

其次，看看CSS3 transitions。与基于JavaScript的动画相比，它们更多更平滑（GPU加速）。此外，超级易学和使用。只需描述一个CSS类，并在初始位置设置时将其添加到您的云中。

至于确定浏览器选项卡是否在后台，jQuery作为动画代码使用的requestAnimationFrame，是一个60 FPS的代码，可以为你做自动

---

看来，jQuery不再使用requestAnimationFrame（他们used to在某个时刻，但随后将其删除）。所以，这里an animate function使用requestAnimationFrame（IE的setTimeout垫片）你可以窃取想法（或只是抓住函数本身）。

Answer 2

您可以收听该窗口的blur和focus事件：

$(window).on('blur', function() {
    // window went into background, stop animations here
    // ...
});

$(window).on('focus', function() {
    // window became active, start animations here
    // ...
});