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

Posted 2023-05-08

【中文标题】JQuery.animate() 在某些浏览器上以不同的速度移动 div

【英文标题】：JQuery.animate() moving divs at different speeds on some browsers

【发布时间】：2012-04-12 11:46:28

【问题描述】：

我最近开始使用 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

【问题讨论】：

你不应该有两个元素具有相同的id。这不是有效的标记。

感谢您的信息。我已将其更改为 class 而不是 id。不幸的是，性能没有变化。

【参考方案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/

【讨论】：

谢谢杰夫，这就是我要找的！不幸的是，现在我遇到了 Chrome 计算 outerWidth() 错误的问题。

似乎在小提琴中工作。我读到 Chrome 中有一个错误，当获取outerWidth 时，加载 css 和 javascript 的顺序很重要。尝试先加载 CSS，然后再加载脚本。

如果您的宽度不会发生太大变化，您始终可以将其硬编码为临时解决方法。我认为是 2164。

感谢您的帮助。只有在添加/删除图像时宽度才会改变。或者如果高度改变。似乎 Chrome 只计算“#slider”的第一个孩子的宽度，而不是整个 div。然后再一次。以不同的方式看待这一点。看来chrome不会计算图像的宽度。我尝试分别添加图像的宽度，并提出 200 像素和 10 个图像。每张图片都有 20px 的边距，因此 Chrome 仅使用 outerWidth(true) 计算边距。难道不直接设置Chrome就无法计算图片的宽度吗？

你更新你的html了吗？因为我正在查看您的示例页面并且您更新了 javascript，但您的 html 仍然相同。您需要将两个slider div 合并为一个div 并将其改回id="slider"。此外，您的脚本仍然显示$('div[id=slider]')，而它应该显示$('#slider')。