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

Question

  

可能重复：
  jquery animate background position

我有一个应该在背景元素上有动画的按钮。

在悬停时箭头应向下滑动并在悬停时滑动备份。这适用于Chrome。

此动画在Chrome和IE8中正常运行。

IE9：在悬停时，背景只是翻转而没有滑动效果。但是在悬停时，滑动动画会起作用。

FF：没什么。没电影......

http://egelect.com/2013/index-test.php

有什么建议吗？

HTML

<div id="bienvenue">Bienvenue<span id="separator">&nbsp;</span></div>

的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>

Answer 1

Firefox不理解background-position-y，只知道background-position（同时包含x和y值）。

但是，

Here is a plugin声称要解决问题。或者，您可以使用分层图像替换背景图像，并为该位置设置动画。