javascript-在Firefox中切换浏览器标签时,jQuery动画中断

2019-11-01 02:38:21 阅读：192 来源： 互联网

标签：jquery-animate css html javascript jquery

我有一个带有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;
}

对可能的修复有任何想法吗？我知道浏览器在不活动的选项卡中以较低的速率渲染动画,但是我似乎无法定位动画并在切换的选项卡上停止/恢复它.
提前致谢.

解决方法:

我认为如果窗口不可见(不需要焦点),jQuery打算不运行它
通过使用window.requestAnimationFrame来做到这一点
为什么？因为如果您看不到动画,它可以节省性能.
我认为动画值是在背景中计算的,但不是元素的实际渲染.

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

你需要做什么.
创建一个函数nextText来更改文本,并创建一个startAnimation函数来启动动画.还有一个stopAnimation函数来停止动画.
不要使用间隔.
通过调用stopAnimation可以停止动画
在Onfocus上,您可以通过调用startAnimation来启动动画
加载后,您一次调用startAnimation
动画结束后,您调用函数nextText
nextText调用startAnimation

标签：jquery-animate,css,html,javascript,jquery
来源： https://codeday.me/bug/20191101/1980356.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-在Firefox中切换浏览器标签时,jQuery动画中断