Jquery - 动画背景问题

Question

我在网上搜索了一个背景动画样本。我找到了这个网址：

http://jsfiddle.net/rwaldron/TzWQA/

并且它适用于safari和chrome，但动画背景不适用于opera和Firefox。是否有任何解决方法可以在浏览器中使用它？

它包含的代码是：

$(document).ready(function(){
 $("#puppies")
    .animate({
        backgroundPositionY: "0px",
        backgroundPositionX: "-250px"
    }, 2000);
});

Answer 1

@AlphaMale对代码失败原因的描述是准确的。我使用一个方便的代码片段，使用跨语言浏览器使用以下语法：

$(document).ready(function(){
  $("#puppies")
    .animate({
        backgroundPosition : "(0 -250px)"
    }, 2000);
});

在行动中看到它！ http://jsfiddle.net/dUmNN/1/

Answer 2

FF不支持

backgroundPositionY 和 backgroundPositionX 。因此，如果要为背景设置动画，则应将 X，Y 值一起传递给背景位置。

以下是对同一问题的讨论：

<强> background-image animation not working in Firefox

另见：

<强> http://www.protofunc.com/scripts/jquery/backgroundPosition/

<强> http://snook.ca/archives/javascript/jquery-bg-image-animations/

希望这有帮助。