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和amp; jquery案例。他们应该是不同的。除非它为什么要移动？在css＆amp;中设置先前的位置在代码的jquery部分给出最终位置。它有用！

用jQuery水平滚动背景图像

2 个答案: