当选项卡/页面处于活动状态时启动动画

Question

我对选项卡或页面处于活动状态时启动页面动画有一个简单的问题。我的意思是当用户打开页面但开始浏览另一个网站直到我们的网站加载时。然后他点击我们的网站选项卡，然后加载动画。我在许多网站上看到过这个，但永远不知道这样做的诀窍是什么。

有关演示，请转到：http://swiftideas.net/打开网站并转到另一个页面，当网站完全加载时，单击Swiftideas网站。你会看到淡入淡出的效果说"你好。我们是快速的想法"和菜单也！

但是当你浏览页面时，它就开始了。 相当聪明！有什么线索吗？

希望你们也喜欢这个！

Answer 1

发件人：如何判断浏览器/选项卡是否处于活动状态

您将使用窗口的focus和blur事件：

var interval_id;
$(window).focus(function() {
    if (!interval_id)
        interval_id = setInterval(hard_work, 1000);
});
$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});

---

要回答"双重火力"的评论问题并保持jQuery的易用性：

$(window).on("blur focus", function(e) {
    var prevType = $(this).data("prevType");
    if (prevType != e.type) {   //  reduce double fire issues
        switch (e.type) {
            case "blur":
                // do work
                break;
            case "focus":
                // do work
                break;
        }
    }
    $(this).data("prevType", e.type);
})