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

我最近开始使用JQuery，并创建了一个小滑块来显示网站赞助商的徽标等。我使用Firefox时，它似乎工作正常。我决定用Chrome加载这个网站，它的行为相当奇怪。直到第一个div（滑块被分割为两个div，以便第一个可以在完成通过遮罩div后移动到末尾）进入第二个（以及每个并发）过程的屏幕之前，动画看起来很好。第一个分区似乎移动得更快，超过了第二个分区。你知道这是什么原因吗？这似乎只发生在Chrome和Safari中。他甚至还工作

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

---

您可以在动作中看到它

动画取决于定时中断。无法保证精确计时，因此根据具体实现，两个滑块的计时可能会出现偏差

如果只使用一个滑块元素，则不会遇到该问题。它还大大简化了代码。方法是复制滑块元素（使用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（）

调用中做一些额外的数学运算，就可以查看您当前的位置

---

演示：

动画取决于定时中断。无法保证精确计时，因此根据具体实现，两个滑块的计时可能会出现偏差

如果只使用一个滑块元素，则不会遇到该问题。它还大大简化了代码。方法是复制滑块元素（使用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（）

调用中做一些额外的数学运算，就可以查看您当前的位置

---

演示：

您不应该让两个元素具有相同的

id

。这不是有效的标记。感谢提供信息。我将它改为class而不是id。不幸的是，性能没有变化。您不应该有两个元素具有相同的

id

。这不是有效的标记。感谢提供信息。我把它改为class而不是id。不幸的是，性能没有变化。谢谢杰夫，这就是我要找的！不幸的是，现在我遇到了一个Chrome计算outerWidth（）错误的问题。似乎是在胡闹。我读到Chrome中有一个bug，当获取

外径时，加载css和javascript的顺序很重要。尝试先加载CSS，然后再加载脚本。如果宽度变化不大，可以将其硬编码作为临时解决方案。我想是2164。谢谢你的帮助。宽度仅在添加/删除图像时更改。或者如果高度改变了。Chrome似乎只是在计算“#slider”的第一个子项的宽度，而不是整个div的宽度。换个角度看。chrome似乎不会计算图像的宽度。我尝试分别添加图像的宽度，得到了200像素和10个图像。每个图像都有20px的边距，因此Chrome仅使用外径（true）计算边距。如果不是直接设置，Chrome可能无法计算图像的宽度吗？你更新了html吗？因为我正在查看您的示例页面，您更新了javascript，但您的html仍然是一样的。您需要将两个
slider
div合并为一个div，并将其更改回
id=“slider”
。另外，您的脚本仍然是
$（'div[id=slider]'）
，而它应该是
$（'.\slider'）
。谢谢杰夫，这就是我要找的！不幸的是，现在我遇到了一个Chrome计算outerWidth（）错误的问题。似乎是在胡闹。我读到Chrome中有一个bug，当获取
外径时，加载css和javascript的顺序很重要。尝试先加载CSS，然后再加载脚本。如果宽度变化不大，可以将其硬编码作为临时解决方案。我想是2164。谢谢你的帮助。宽度仅在添加/删除图像时更改。或者如果高度改变了。Chrome似乎只是在计算“#slider”的第一个子项的宽度，而不是整个div的宽度。换个角度看。chrome似乎不会计算图像的宽度。我尝试分别添加图像的宽度，得到了200像素和10个图像。每个图像都有20px的边距，因此Chrome仅使用外径（true）计算边距。如果不是直接设置，Chrome可能无法计算图像的宽度吗？你更新了html吗？因为我正在查看您的示例页面，您更新了javascript，但您的html仍然是一样的。您需要将两个
slider
div合并为一个div，并将其更改回
id=“slider”
。此外，您的脚本仍然显示
$（'div[id=slider]'）
，而它应该显示
$（'#slider'）
。