我有一个带有 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;
}
对可能的修复有任何想法吗?我知道浏览器在非事件选项卡中以较慢的速度呈现动画,但我似乎无法定位动画并在切换的选项卡上停止/恢复它。 提前致谢。
最佳答案
我认为 jQuery 的目的是在窗口不可见时不运行(不需要焦点)
它通过使用 window.requestAnimationFrame 来实现
为什么?因为如果您看不到动画,它可以节省性能。
我认为动画值是在后台计算的,而不是元素的实际渲染。
动画的问题是:您通过间隔调用更改文本。间隔与动画无关。如果你停止/暂停 jquery 动画,因为你模糊了窗口,超时不会停止。
你需要做什么。
创建一个函数 nextText 来更改文本,并创建一个函数 startAnimation 来启动动画。还有一个停止动画的函数 stopAnimation。
不要使用间隔。
Onblur 你通过调用 stopAnimation
来停止动画
Onfocus 你通过调用 startAnimation
来启动动画
加载后调用 startAnimation 一次
动画完成后调用函数 nextText
nextText 调用 startAnimation
关于javascript - 在 firefox 中切换浏览器选项卡时 jquery 动画中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11799315/