当页面没有焦点时，javascript动画排队
因此，在页面上查看时，这个滑动动画效果很好，但如果我转到另一个浏览器选项卡几分钟，然后返回到此选项卡，就像我离开时所有动画都在排队并同时运行得超快。它看起来很可怕...有什么想法吗？
$(文档).ready(function() {
var timeOuts = new Array();
var currentSlide = 0;
var slides = $('.banner_images').length;
homeanimation(currentSlide);
function homeanimation(i) {
if (i == slides) { i = 0; }
$('.banner_images:eq(' + i + ')').css('left', '-901px');
$('.banner_images:eq(' + i + ')').animate({ "left": "0px" }, 800);
$('.overlay-content:eq(' + i + ')').fadeIn(1500);
timeOuts[0] = setTimeout(function() { $('.banner_images:eq(' + i + ')').animate ({ "left": "901px" }, 800) }, 6000);
timeOuts[1] = setTimeout(function() { $('.overlay-content:eq(' + i + ')').fadeOut(700) }, 6000);
timeOuts[3] = setTimeout(function() { currentSlide = i + 1; }, 6000);
timeOuts[2] = setTimeout(function() { homeanimation(currentSlide); }, 6000);
}
});
So this sliding animation works great when viewing on the page, but if i go to another browser tab for a couple minutes and come back to this tab it's like all the animations queued up while i was gone and run superfast all at once. It looks horrible... Any ideas?
$(document).ready(function() {
var timeOuts = new Array();
var currentSlide = 0;
var slides = $('.banner_images').length;
homeanimation(currentSlide);
function homeanimation(i) {
if (i == slides) { i = 0; }
$('.banner_images:eq(' + i + ')').css('left', '-901px');
$('.banner_images:eq(' + i + ')').animate({ "left": "0px" }, 800);
$('.overlay-content:eq(' + i + ')').fadeIn(1500);
timeOuts[0] = setTimeout(function() { $('.banner_images:eq(' + i + ')').animate ({ "left": "901px" }, 800) }, 6000);
timeOuts[1] = setTimeout(function() { $('.overlay-content:eq(' + i + ')').fadeOut(700) }, 6000);
timeOuts[3] = setTimeout(function() { currentSlide = i + 1; }, 6000);
timeOuts[2] = setTimeout(function() { homeanimation(currentSlide); }, 6000);
}
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
http://api.jquery.com/animate/ ：
http://api.jquery.com/animate/ :
放弃 setTimeouts。在涉及窗口焦点时，它们的行为很奇怪。查看 jQuery 的自然 .queue() 功能。
ditch the setTimeouts. they behave strangely where window focus is concerned. check out jQuery's natural .queue() functionality.
升级到 1.6.3+
http://blog. jquery.com/2011/09/01/jquery-1-6-3-released/
他们在 1.6.3 中提取了 requestAnimationFrame，这是问题的原因（最有可能）
Upgrade to 1.6.3+
http://blog.jquery.com/2011/09/01/jquery-1-6-3-released/
They pulled out the requestAnimationFrame in 1.6.3 which is the cause of your problem (most likely)