jQuery背景按钮动画在Chrome和IE8中工作，但在Firefox或IE9中不工作

可能重复：

我有一个按钮，应该有一个动画的背景元素

箭头应在悬停时向下滑动，在悬停时向外滑动。这在铬上可以很好地工作

该动画在Chrome和IE8中正常工作

IE9：悬停时，背景只是翻转，没有滑动效果。但在悬停时，滑动动画可以工作

FF：没什么。没有电影

有什么建议吗

HTML

Bienvenue

jQuery

<script type="text/javascript">
$('document').ready(function() {
   $('#bienvenue').css({backgroundPosition: "right 100%"}).hover(
       function() {
           $(this).stop().animate({'background-position-y': "0%"}, "600");
       }, function() {
           $(this).stop().animate({'background-position-y': "100%"}, "600");
       }
   );
});
</script>

$（'document'）.ready（函数（）{
$（'bienvenue'）.css（{backgroundPosition:“right 100%”）。悬停(
函数（）{
$（this.stop（）.animate（{'background-position-y'：“0%”，}，“600”）；
}，函数（）{
$（this.stop（）.animate（{'background-position-y'：“100%”，}，“600”）；
}
);
});

Firefox不理解

background-position-y

，只理解

background-position

（x和y值按顺序排列）

---

然而，这声称解决了问题。或者，您可以用分层图像替换背景图像，并为该位置设置动画。

这是正确的。我自己也遇到了这个问题。结果真的很麻烦。@317，你最后做了什么？那么IE9的行为呢？只是尝试设置

背景位置的动画，但没有成功…您也可以查看。
<script type="text/javascript">
$('document').ready(function() {
   $('#bienvenue').css({backgroundPosition: "right 100%"}).hover(
       function() {
           $(this).stop().animate({'background-position-y': "0%"}, "600");
       }, function() {
           $(this).stop().animate({'background-position-y': "100%"}, "600");
       }
   );
});
</script>