Question

我有一个带有jquery的动画文字效果，可以在chrome中正常工作，但是当用户切换标签时会在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;
}

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

Answer 1

我认为如果窗口不可见（jac是不必要的话），jQuery打算不运行它是通过使用window.requestAnimationFrame来实现的为什么？因为如果看不到动画，它可以节省性能。动画值是在我认为的背景中计算的，而不是元素的实际渲染。

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

你需要做什么。
创建一个函数nextText，用于更改文本和启动动画的函数startAnimation。还有一个停止动画的函数stopAnimation 不要使用间隔 Onblur你通过调用stopAnimation来停止动画通过调用startAnimation
来启动动画加载后，您将调用startAnimation一次动画结束后，调用函数nextText
nextText调用startAnimation

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

1 个答案: