Javascript JQuery跨浏览器设置背景位置动画

我似乎无法实现这一目标：

$("#animation").animate({backgroundPosition:"-100px 10px"});

我试过这个，但在FFox上不行：

$('#animation').animate({
  'background-position-x': '10%',
  'background-position-y': '20%'
}, 10000, 'linear');

分区：

JsFiddle： 我正在使用jquery1.8。 有什么想法吗？

我想还有为什么它不能在Firefox中工作。我在处理你的代码。以下代码块的行为方式与您的代码相同

这是同样的行为方式

$(document).ready(function() {
  $('#animation').animate({'background-position': '10%'}, 10000, 'linear');
});

到

这个代码块也可以在Firefox中使用

 $(document).ready(function() {
    $('#animation').animate({'background-position': '10%'}, 10000, 'linear');
 });

---

如需进一步参考，请查看上述链接。这些将对您有所帮助。

好的，因此如果您只想为

x

位置设置动画，您很幸运，因为为

背景位置设置
y
动画在jQuery中不起作用。因此，对于
x
使用：

'background-position': '10%'

但是，如果要增加位置以设置一系列帧的动画，则需要这样增加：

'background-position': '+=10%'

有关停止/前进控件的工作示例，请参见my。
您可以使用此代码沿x和y方向设置背景位置的动画，而且cpu成本较低

var x=0;
window.setInterval(function(){
$('#animation').css('background-position',x+'px '+x+'px');
x=(x-4)%1100;//1100 is width of background image in px
},70);

为什么不试试基思伍德的呢？几年前，当我来到一个项目时，我很晚才使用它，需要一个背景动画解决方案，没有时间调查为什么我的代码在跨浏览器时失败（又快又脏——嘿，最后期限迫在眉睫！），老实说，这是我一直在使用的少数插件之一

链接页面上有一些例子，所以我不想重复，但向伍德先生致敬，因为他的插件从未让我失望过。
我认为它不喜欢这个百分比。试着把它改成px，看看是否有什么事情发生。我做了，但仍然不能用firefox。它在chrome中正常工作吗？你们有现场演示吗？或者是一个代码笔/jsfiddle？编辑：见此：JsFeddle现在处于编辑状态。@qwerty您的代码笔可以在Chrome上工作，但不能在FF上工作，我也是，我想让它至少可以在Chrome和FF上工作。'+=10%有一个缺点。它也会重置“背景位置y”。
'background-position': '+=10%'

var x=0;
window.setInterval(function(){
$('#animation').css('background-position',x+'px '+x+'px');
x=(x-4)%1100;//1100 is width of background image in px
},70);