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