停止窗口模糊的动画

Question

我有以下代码，它在一个重复的循环中淡入和淡出元素。当选项卡处于非活动状态时，div内的文本会堆积在彼此的顶部，然后在选项卡再次激活时被清除。是否有一种方法可以在窗口模糊时停止此动画并重新开始对焦?

(cycle = function () {
    setTimeout(function(){$('#right').fadeOut(1000)},10000);
    setTimeout(function(){$('right').fadeIn(1000)}, 11000);
    setTimeout(function(){$('#left').fadeOut(1000)},13000);
    setTimeout(function(){$('#left').fadeIn(1000)},14000);
    setTimeout(function(){$('#left').fadeOut(1000)},15000);
    setTimeout(function(){$('#left').fadeIn(1000)},17000);
})();

Answer 1

我在评论中给出了一个建议，但后来想起这个解决方案不一定是跨浏览器兼容的，就像我以前遇到的那样，因此创建了我的插件。

可以这么说，$(window).blur()和focus并不总是像预期的那样在所有浏览器上工作。我不记得我遇到的问题的确切清单，但我知道一些事情，比如;点击另一个选项卡(在FF中，我想)不会触发模糊，点击另一个程序会触发模糊，尽管我的主浏览器窗口仍然打开，该选项卡有焦点，它没有Windows焦点，等等。

我创建的以下插件可能会有所帮助，因为我已经将其归档为在"大多数"浏览器和版本(未在所有版本上测试)中工作，并且它的功能完全符合我们期望的我工作的地方。只有当浏览器窗口的标签失去焦点到同一浏览器的另一个标签时，它才会变得模糊。当然，焦点也是如此。

参见jsFiddle示例用法和未合并代码

缩小插件:

_{只需添加到js文件中，以便在jquery之后调用或放置在代码的顶部}

(function(jQuery){jQuery.winFocus||(jQuery.extend({winFocus:function(b){function c(a){a=a||window.event;a.hidden=a.type in{focus:"visible",focusin:"visible",pageshow:"visible",blur:"hidden",focusout:"hidden",pagehide:"hidden"}?"focusout"===a.type:this[d];jQuery(window).data("visible",!a.hidden);jQuery.winFocus.methods.exeCB(a)}var d="hidden";d in document?document.addEventListener("visibilitychange",c):(d="mozHidden")in document?document.addEventListener("mozvisibilitychange",c):(d="webkitHidden")in document?
document.addEventListener("webkitvisibilitychange",c):(d="msHidden")in document?document.addEventListener("msvisibilitychange",c):"onfocusin"in document?document.onfocusin=document.onfocusout=c:window.onpageshow=window.onpagehide=window.onfocus=window.onblur=c;for(x in arguments)"object"==typeof arguments[x]?(arguments[x].blur&&(jQuery.winFocus.methods.blur=arguments[x].blur),arguments[x].focus&&(jQuery.winFocus.methods.focus=arguments[x].focus),arguments[x].blurFocus&&(jQuery.winFocus.methods.blurFocus=
arguments[x].focus)):"function"==typeof arguments[x]&&(void 0===jQuery.winFocus.methods.blurFocus?jQuery.winFocus.methods.blurFocus=arguments[x]:(jQuery.winFocus.methods.blur=jQuery.winFocus.methods.blurFocus,jQuery.winFocus.methods.blurFocus=void 0,jQuery.winFocus.methods.focus=arguments[x]))}}),jQuery.winFocus.methods={blurFocus:void 0,blur:void 0,focus:void 0,exeCB:function(b){jQuery.winFocus.methods.blurFocus?jQuery.winFocus.methods.blurFocus(b,!b.hidden):b.hidden?jQuery.winFocus.methods.blur&&
jQuery.winFocus.methods.blur(b):jQuery.winFocus.methods.focus&&jQuery.winFocus.methods.focus(b)}})})(jQuery);

_{也:#line-o’s reference SO问题是我第一次受到启发写这个插件的地方，我也有这个插件的答案张贴在那里。lol}

Answer 2

看看当前浏览器的可见性API。对于旧的(即ie)，您仍然需要一个回退。

或者你可以在这里找到解决方案:
是否有一种方法可以检测浏览器窗口当前是否处于非活动状态?