jquery - HTML/JQuery : A div with a scrolling backgrounds that never ends?

Question

我有一个宽度为 400 像素的 div 元素和一个宽度为 2000 像素的背景图像。我希望这个背景图像无休止地横向滚动，它绝不能到达和结束，因为 bg 图像设置为重复(我认为 HTML 默认情况下会这样做)。

我想过这样做，但我不知道这样做是否正确:

$("#divWithScrollingBackground").animate({"background-position-x" : 999999999}, 999);

Answer 1

为了克服动画必须运行多长时间(和多远)的不确定性，您可以使用带有“反激重复”的单周期动画来做到这一点。这更像是代码的一般编码方式。

function bgScroll() {
    $("#x").animate({
        'backgroundPosition': '-2000px 0'
    }, 4000, 'linear', function() {
        $(this).css("backgroundPosition", '0 0');
        setTimeout(bgScroll, 0);
    });
};
bgScroll();

您将需要使用 this jQuery plugin让 bg 动画跨浏览器工作。

演示 here .

调整我的 4000 毫秒以提供您想要的速度(较小的数字 = 更快的动画)。

“线性”对于在反激时提供尽可能平滑的过渡非常重要。我认为 jQuery 默认的“摆动”缓动会产生奇怪的效果，但一定要尝试一下。