JQuery.animate() 在某些浏览器上以不同的速度移动 div

Question

我最近开始使用 JQuery 并创建了一个小滑块来显示网站赞助商的徽标等。使用 Firefox 对我来说似乎工作正常。我决定在 Chrome 中加载该网站，它的行为相当奇怪。动画看起来很好，直到第一个 div（滑块被分成两个 div，因此第一个可以在完成它通过掩蔽 div 后移动到末尾）进入屏幕以进行第二个（以及每个并发）通过。第一个 div 似乎移动得更快，并超过了第二个 div。有什么想法会导致这种情况吗？它似乎只发生在 Chrome 和 Safari 中。 IE 也能正常工作！

$(document).ready(function () {
var s1 = $("div[name=s1]");
var s2 = $("div[name=s2]");
var release = 0;
var speed = 75; //px per sec
var interval = 100; //milliseconds per animation
var origSpeed = speed;

function slide() {
    release = 1 - release;
    if (release == 0) {
        return;
    }
    distance = "+=" + (parseInt(s1.width(), 10) + parseInt(s2.width(), 10)) + "px";
    if ((-1 * parseInt(s1.css("left"), 10)) > parseInt(s1.width(), 10)) {
        s1.css({left: distance});
    }
    if ((-1 * parseInt(s2.css("left"), 10)) > (parseInt(s1.width(), 10) + parseInt(s2.width(), 10))) {
        s2.css({left: distance});
    }
    slide_again();
}

function slide_again() {
    $("div[id=slider]").animate({left: "-=" + interval * (speed / 1000) + "px"}, interval, "linear", slide);
}

    $("div[id=slider]").hover(function() {
    speed = 0;
    }, function() {
        speed = origSpeed;
    });

    slide();
});

你可以看到它在行动here

Answer 1

动画依赖于定时中断。无法保证确切的时间，因此根据实施情况，两个滑块的时间可能会有所不同。

如果您只使用一个滑块元素，则不会遇到该问题。它还大大简化了代码。这样做的方法是复制您的滑块元素（使用 jQuery），然后为宽度的一半（预先复制的宽度）设置动画并重新开始：

$(window).load(function() {
    var speed = 75; //px per sec

    // Get the width of the slider before you duplicate it
    var width = $('#slider').outerWidth();

    // Repeat the inner content by cloning and appending it to the end
    $('#slider').append($('#slider').children().clone());

    function slide() {
        // The duration takes into account the current position
        // in case you are starting from a hover-pause
        var curleft = $('#slider').position().left;
        var duration = (width+curleft) * 1000 / speed;
        $("#slider").animate({
            // Animate until original width slides off to left
            left: "-" + width + "px"
        }, duration, "linear", function() {
            // Reset to original position and start over
            $(this).css("left", "0px");
            slide();
        });
    }

    $("#slider").hover(function() {
        $('#slider').stop();
    }, function() {
        slide();
    });

    slide();
});

您也可以将悬停更改为只执行.stop() 和slide()，只要您在slide() 调用中进行一些额外的数学运算即可查看您当前的位置。

演示：http://jsfiddle.net/6Dxg6/