jquery 动画在窗口调整大小时加速

Question

我们有一个网页，顶部附近有一个基本的 jquery 图像 slider 。我们遇到一个问题，当浏览器窗口最小化然后再次最大化时，动画速度会加倍。我们已经在 chrome、ff 和 ie 中确认了这一点，但并非每次都如此。有时我必须多次调整大小才能加速。有谁知道为什么会这样做？这是页面 - http://theatlasconsultingjobs.hiringhook.com/jobseeker/Search.aspx

这是 slider 的 jquery。

var fadeDuration=2000;
var slideDuration=4000;
var currentIndex=1;
var nextIndex=1;
$(document).ready(function()
{
    $('ul.slideshow li').css({opacity: 0.0});
    $("'ul.slideshow li:nth-child("+nextIndex+")'").addClass('show').animate({opacity: 1.0}, fadeDuration);
    var timer = setInterval('nextSlide()',slideDuration);
})
function nextSlide(){
        nextIndex =currentIndex+1;
        if(nextIndex > $('ul.slideshow li').length)
        {
            nextIndex =1;
        }
        $("'ul.slideshow li:nth-child("+nextIndex+")'").addClass('show').animate({opacity: 1.0}, fadeDuration);
        $("'ul.slideshow li:nth-child("+currentIndex+")'").animate({opacity: 0.0}, fadeDuration).removeClass('show');
        currentIndex = nextIndex;
}

Answer 1

这是使用animaitions 和setInterval 时出现的问题。当选项卡处于非事件状态或最小化时，现代浏览器将停止动画。这将创建一个队列，一旦选项卡再次处于事件状态，浏览器将尝试执行所有队列。

要解决此问题，您可以在动画完成后使用 clearTimeout 并将 setInterval 替换为 setTimeout

示例

var timer;

$("'ul.slideshow li:nth-child("+nextIndex+")'")
    .addClass('show')
    .animate({opacity: 1.0}, fadeDuration, function(){
        timer = setTimeout(function() {
                nextSlide();
            }, slideDuration);            
});

function nextSlide(){
    nextIndex =currentIndex+1;
    if(nextIndex > $('ul.slideshow li').length)
    {
        nextIndex =1;
    }
    $("'ul.slideshow li:nth-child("+nextIndex+")'")
        .addClass('show')
        .animate({opacity: 1.0}, fadeDuration);

    $("'ul.slideshow li:nth-child("+currentIndex+")'")
        .animate({opacity: 0.0}, fadeDuration)
        .removeClass('show');

    currentIndex = nextIndex;

    clearTimeout(timer);
}