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焦点等。

我创建的以下插件可能会有所帮助，因为我已将其归档为“大多数”浏览器和版本（未在所有版本上测试），并且它的功能与我们工作的地方完全相同。如果确切的浏览器窗口的选项卡失去焦点到同一浏览器的另一个选项卡，它只会变得模糊。当然反之亦然。

See jsFiddle Example usage and unminified code

Minified Plugin：

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

(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引用了SO问题是我第一次受到启发来编写这个插件的地方，我也在那里发布了这个插件答案。洛尔}

Answer 2

查看当前浏览器的Visibility API。你仍然需要为旧的（即IE）支持。

或者您可以在这里找到解决方案：
Is there a way to detect if a browser window is not currently active?

在窗口模糊停止动画

2 个答案:

See jsFiddle Example usage and unminified code

Minified Plugin：