当页面没有焦点时,javascript动画排队

时间:2011-10-13 20:05:46

标签: javascript jquery animation slider

因此,当在页面上查看时,此滑动动画效果很好,但是如果我转到另一个浏览器标签几分钟并返回到此选项卡,就像我离开时排队的所有动画一样,一次性运行超快。它看起来很糟糕......有什么想法吗?

$(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);

}

});

3 个答案:

答案 0 :(得分:2)

http://api.jquery.com/animate/

  

由于requestAnimationFrame()的性质,您不应该使用setInterval或setTimeout循环对动画进行排队。为了保留CPU资源,支持requestAnimationFrame的浏览器在不显示窗口/选项卡时不会更新动画。如果在动画暂停时继续通过setInterval或setTimeout对动画进行排队,则当窗口/选项卡重新获得焦点时,所有排队的动画将开始播放。要避免这个潜在的问题,请在循环中使用上一个动画的回调,或者将函数附加到元素.queue()以设置超时以开始下一个动画。

答案 1 :(得分:1)

抛弃了setTimeouts。它们在窗口焦点方面表现得很奇怪。查看jQuery的自然.queue()功能。

答案 2 :(得分:0)

升级到1.6.3+

http://blog.jquery.com/2011/09/01/jquery-1-6-3-released/

他们在1.6.3中删除了requestAnimationFrame,这是导致问题的原因(最有可能)