Javascript 在firefox中切换浏览器选项卡时，jquery动画会中断

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

我尝试过使用条件for

$（window.blur（）

和

$（window.focus（）

以及

clearInterval

函数，但一点运气都没有

这里有一个链接到

下面是有问题的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>

对可能的修复有什么想法吗？我知道浏览器在非活动选项卡中以较慢的速度渲染动画，但我似乎无法以动画为目标并在切换的选项卡上停止/恢复动画。

---

提前感谢。

我认为jQuery的目的是在窗口不可见时不运行（不需要焦点）
它通过使用 为什么？因为如果看不到动画，它可以节省性能。 我认为动画值是在背景中计算的，但不是元素的实际渲染

---

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

您需要做什么。
制作一个函数nextText（用于更改文本）和一个函数startAnimation（用于启动动画）。以及停止动画的函数stopAnimation。
不要使用间隔。
Onblur通过调用stopAnimation停止动画
Onfocus通过调用startAnimation启动动画
加载后，您可以调用startAnimation一次
动画完成后，调用函数nextText

---

nextText调用startAnimation

在我的firefox中似乎不是问题您使用的是什么版本？如果是这种情况，有没有办法告诉它停止在后台计算并恢复焦点/可见？

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