jquery - Jquery - 动画背景问题

Question

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

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

它适用于 safari 和 chrome，但动画背景不适用于歌剧和 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-position。

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

背景图像动画在 Firefox 中不起作用

另见：

http://www.protofunc.com/scripts/jquery/backgroundPosition/

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

希望这可以帮助。