jquery.animate background-position不起作用

我正在尝试使用动画创建背景位置更改。
但由于某种原因，它不起作用。

 
  $('.moveme').css("background-position","0px 0px").animate({backgroundPosition:"-100px 10px"});  

想法？

Answer 1

jQuery默认不支持此function。

您可以使用以下插件： http ： //plugins.jquery.com/project/backgroundPosition-Effect

编辑：

我错了，它有效：

 $(function() { $('.moveme').css("backgroundPosition","0px 0px").animate({"backgroundPosition":"-100px 10px"}); }); 

如果你输入地址栏，它可以工作，但似乎我不能在jsfiddle上工作，奇怪… xD

Answer 2

动画backgroundPosition从JQuery 1.5.0开始不起作用。 如果你想让它工作，你将不得不恢复到1.4.4。 显然它在1.4.4中工作的事实是巧合，因为“所有动画属性应该被动画化为单个数值，除非如下所述;大多数非数字属性无法使用基本jQueryfunction进行动画处理。 （例如，宽度，高度或左边可以设置动画，但背景颜色不能。）“由于backgroundPosition需要两个数值，因此不应支持它。

请参阅此错误票证： http ： //bugs.jquery.com/ticket/8160

一个可能的解决方案： http ： //bugs.jquery.com/ticket/7755#comment：1

Answer 3

jQuery比1.4更新的版本不支持具有两个属性的函数。 但你可以使用两个单独的函数 – 一个用于x维度，一个用于y一个，如下所示：

 $('.moveme').css("background-position","0px 0px").animate({'background-position-x': "-100px", 'background-position-y': "10px"}); 

这不会修复有关event.layer js控制台错误（它是由浏览器引起的并且不会对网站造成伤害）但是它有效;）

Answer 4

我在这里使用了背景位置：www.we-new.com（页脚），但这不是我现在需要的效果。 我需要图像向后/向前移动:-(

现在我有这个：

 $(document).ready(function() { var scrollSpeed=70; var step=1; var current=0; var imageWidth=60; var headerWidth=screen.width; var headerStyle = document.getElementById('header-content').style; var restartPosition=-(imageWidth-headerWidth); function scrollBg(){ current-=step; if(current==restartPosition){ current=0;} $('#ball1').css("background-position",current+"px 0");} var init = setInterval(scrollBg,scrollSpeed); }); 

http://jsfiddle.net/yFKf9/3/

Answer 5

把它裹在里面

 $(document).ready(function() { $('.moveme').css("backgroundPosition","0px 0px").animate({backgroundPosition:"-100px 10px"}); });