jquery - 使用 jQuery 水平滚动背景图像

Question

这是我对 jQuery 的尝试：

$(document).ready(function(){
$('#bg').animate({ backgroundPosition: '320px 0px'}, 10000, 'linear');
});

这是 bg 的 CSS：

#bg {
    background: url('scribbles.png') repeat-x 320px 0px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

这是HTML：

<div id="bg"></div>

我希望背景图像在屏幕上缓慢移动。有什么建议么？

谢谢！

Answer 1

图像是否会永远滚动？如果没有，以下可能是一个很好的起点：

$('#bg').animate({ backgroundPosition: '+=100% 0px'}, 10000, 'linear');

如果要永远重复，请考虑以下带有递归回调的解决方案：

var animateBackground = function()
{
    $('#bg').animate
    (
        { 
            backgroundPosition: '-=100px 0px'
        }, 
        10000,
        'linear',
        function()
        {
            animateBackground(); // recursive call back
        }
    )
};

$( // short-hand for "$(document).ready"
    function()
    {
        animateBackground(); // initial call that starts everything off
    }
);

Answer 2

css 和 jquery 案例的背景位置相同。他们应该是不同的。除非它为什么会移动？在 css 中设置前一个位置并在代码的 jquery 部分中给出最终位置。它会工作的！