在Firefox中切换浏览器选项卡时jquery动画中断

Posted 2023-05-08

【中文标题】在Firefox中切换浏览器选项卡时jquery动画中断

【英文标题】：jquery animation breaks when switching browser tabs in firefox

【发布时间】：2012-08-01 17:08:34

【问题描述】：

我有一个带有 jquery 的动画文本效果，它在 chrome 和 ie 中运行良好，但在用户切换选项卡时会在 firefox 中中断。如果您切换选项卡并让动画运行 10-15 秒，然后返回您可以看到动画尝试一次运行多行。

我尝试使用$(window).blur() 和$(window).focus() 的条件以及clearInterval 函数，但完全没有运气。

这是site的链接

这是有问题的 jquery：

 $(document).ready(function()
$('.container .flying-text').css(opacity:0);
$('.container .active-text').animate(opacity:1, marginLeft: "350px", 4000);
var int = setInterval(changeText, 5000);    

 function changeText()
var $activeText = $(".container .active-text"); 

var $nextText = $activeText.next(); 
if($activeText.next().length == 0) $nextText = $('.container .flying-text:first');

$activeText.animate(opacity:0, 200);
$activeText.animate(marginLeft: "-100px");

$nextText.css(opacity: 0).addClass('active-text').animate(opacity:1, marginLeft: "350px", 4000, function()

    $activeText.removeClass('active-text'); 
    );
  

 );

html:

<div class="container">
    <h3 id="fly1" class="flying-text active-text">Creative Solutions</h3>
    <h3 id="fly2" class="flying-text">Graphics</h3>
    <h3 id="fly3" class="flying-text">Sourcing</h3>
    <h3 id="fly4" class="flying-text">Distribution</h3>
    <h3 id="fly5" class="flying-text">Online Tools</h3>
    <h3 id="fly6" class="flying-text">Custom Branding</h3>
    <h3 id="fly7" class="flying-text">Personalized Support</h3>
</div>

和css：

.flying-text
  margin-left:-100px;
  font-size:60px;
  text-align:center;
  font-style:bold;

对可能的修复有任何想法吗？我知道浏览器在非活动选项卡中以较慢的速度呈现动画，但我似乎无法定位动画并在切换的选项卡上停止/恢复它。 提前致谢。

【问题讨论】：

在我的 Firefox 中似乎不是问题，您使用的是什么版本？

【参考方案1】：

我认为如果窗口不可见（不需要焦点），则 jQuery 不打算运行它 它通过使用window.requestAnimationFrame 来实现 为什么？因为如果您看不到动画，它会节省性能。 我认为动画值是在后台计算的，而不是元素的实际渲染。

---

动画的问题是：您通过间隔调用更改文本。间隔与动画无关。如果你停止/暂停jquery动画，因为你模糊了窗口，超时不会停止。

你需要做什么。 创建一个改变文本的函数 nextText 和一个启动动画的函数 startAnimation。还有一个停止动画的函数 stopAnimation。 不要使用间隔。 Onblur 通过调用 stopAnimation 来停止动画 Onfocus 你通过调用 startAnimation 来启动动画 加载后你调用 startAnimation 一次 动画完成后调用函数 nextText nextText 调用 startAnimation

【讨论】：

如果是这种情况，有没有办法告诉它停止在后台计算并恢复焦点/可见？