当页面失去焦点时，具有 setInterval() 方法的 jQuery 画廊无法正常工作

Question

我创建了 jQuery 代码，用于每 5 秒列出一次图像 - 当焦点位于图片上的按钮上时，它必须停止更改。当我的页面失去焦点时，我遇到了问题 - 当我返回时，它在一段时间内无法正常工作，因为图片的坐标不正确！

这是我的 SavasSript 代码：

var displayTimeout = 5000;
var bannerCurrentImgIndex = 0;
var timer;
var link;

function bannerDoWork() {

    var bannerImages = $("#myGallery .main_pic");
    var bannerImagesCount = bannerImages.length;

    if (bannerCurrentImgIndex == bannerImagesCount - 1) {
        bannerImages.eq(bannerCurrentImgIndex).animate({ 'left': '-725px' }, 'slow');
        bannerImages.eq(0).animate({ 'left': '0' }, 'slow');
        bannerImages.eq(bannerCurrentImgIndex - 1).css({ 'position': 'absolute', 'left': '725px' });
        bannerCurrentImgIndex = 0;
    }

    else {
        bannerImages.eq(bannerCurrentImgIndex).animate({ 'left': '-725px' }, 'slow');
        bannerImages.eq(bannerCurrentImgIndex + 1).animate({ 'left': '0' }, 'slow');
        bannerImages.eq(bannerCurrentImgIndex - 1).css({ 'position': 'absolute', 'left': '725px' });
        bannerCurrentImgIndex = bannerCurrentImgIndex + 1;
    }
}

$(document).ready(function () {
    timer = setInterval(function () { bannerDoWork(); }, displayTimeout);
    link = $("#myGallery .main_pic_btn");
    link.hover(function () { timer = clearInterval(timer); },
    function () {
        if (timer == null)
            timer = setInterval(function () { bannerDoWork(); }, displayTimeout);
    });

});

Answer 1

我找到答案了！我设置了动画参数queue=false - 现在效果很好！
例子：

firstPic.animate({ left: 0, top: 0 }, { queue: false, duration: "slow" });