JQuery一个div的滚动背景图像

Question

我想简单地在div中向下移动背景图像（比图像小），这样图像就会在div的可见区域漂移（图像高705，div高215px）。

我从其他帖子中得到了这个，但它似乎不起作用：（

有什么想法吗？-没有错误，但没有发生

在HTML中，我有

<div id="banner"></div>

和css；

#banner {
    background-image: url(/media/residential-services-705.jpg);
    background-repeat: no-repeat;
    height: 215px;
    width: 940px;
    background-position: left 0px;
    margin: 0px;
    padding: 0px;
}

和javascript

$(document).ready(function () {
    bouncebanner();
});
function bouncebanner(){
    $('#banner').stop().animate(
        {backgroundPosition:"(0 -490px)"}, 
        {duration:5000}
    );
}

Answer 1

backgroundPosition: '0 -490'

不要使用可能导致问题的px和括号

Answer 2

如果您只想为其中一个轴（X或Y）设置动画，您应该按如下方式瞄准该特定轴：

// X Axis, use backgroundPositionX //
function bouncebanner(){
    $('#banner').stop().animate({backgroundPositionX: -490}, 5000);
}
// Y Axis, use backgroundPositionY //
function bouncebanner(){
    $('#banner').stop().animate({backgroundPositionY: -490}, 5000);
}

此外，考虑为背景图像添加一个起始位置，因为这将防止旧浏览器中的图像跳转，如下所示：

background: url(/media/residential-services-705.jpg) no-repeat 0 0;

用于X轴的JSFiddle

JSFiddle用于Y轴

我希望这能有所帮助！