2

我有以下代码，它在重复循环中淡入淡出元素。当标签不活动时，divs中的文本彼此堆积一秒钟，然后在再次激活标签时被清除。有没有办法在窗口模糊时停止此动画并重新启动它？

(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);

})();
4

2 回答 2

1

查看当前浏览器的可见性 API。您仍然需要对较旧的（即 IE）进行后备。

或者您可以在这里找到解决方案：
有没有办法检测浏览器窗口当前是否处于活动状态？

于 2013-05-13T19:48:52.120 回答
1

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

可以这么说，$(window).blur()并不focus总是在所有浏览器上都按预期工作。我不记得我遇到的问题的确切列表，但我知道有些是这样的；单击另一个选项卡（我认为在 FF 中）不会触发模糊，单击另一个程序会触发模糊，尽管事实上我的主浏览器窗口仍然打开并且该选项卡具有焦点，它没有 Windows 焦点等。 .

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

请参阅 jsFiddle 示例用法和未缩小的代码

缩小插件：

只需添加到要在 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 Question 是我第一次受到启发编写这个插件的地方，我也在那里发布了这个插件答案。哈哈

于 2013-05-13T20:34:28.523 回答