我正在尝试仅为背景图像的y位置设置动画.
代码在除Firefox之外的所有浏览器中都很有用我在前面的讨论中已经注意到FF有background-position-y的问题,但我不想仅为这个特殊情况包含一个插件.
$(".module").animate({
"height": 160,"background-position-y": cropsize //variable for needed position
},"slow");
正如在这个问题中回答：Still having problems with jQuery background animate – works in safari and IE,nothing else!我应该能够使用普通的background-position属性,但这样做只会破坏其他浏览器中的动画.
$(".module").animate({
"height": 160,"background-position": "0 "+cropsize+"px"
},"slow");
也许这只是一个我遗漏的语法错误,但我似乎无法在FF中使用它(最新版本)
解决方法
background-position-x / y实际上不是任何CSS规范的一部分,它的IE特定CSS,添加到IE5.5,后来由Webkit实现.
Opera和Firefox不接受它.
为了向Luka的答案添加一些内容,即使方法是正确的,这有点不对,使用step方法的最简单方法是为一些任意值设置动画,然后勾选一步,例如：
$('elem').animate({
'border-spacing': -1000
},{
step: function(now,fx) {
$(fx.elem).css("background-position","0px "+now+"px");
},duration: 5000
});
该元素必须包装jQuery样式以接受jQuery方法,如css().
我使用了border-spacing,但任何不会影响你网站的css属性都可以使用,只需记住在CSS中为所用的css属性设置一个初始值.
步骤方法也可以单独使用,如果设置fx.start和fx.end值,使用它就像Luka一样,now = 1几乎等于只使用setInterval,但这个想法听起来都是一样的.
编辑：
对于更新版本的jQuery,还有其他选项,请参阅以下答案：
