jQuery背景按钮动画适用于Chrome和IE8，但不适用于Firefox或IE9 [重复]

Posted 2023-05-08

【中文标题】jQuery背景按钮动画适用于Chrome和IE8，但不适用于Firefox或IE9 [重复]

【英文标题】：jQuery background button animation working in Chrome and IE8, but not Firefox or IE9 [duplicate]

【发布时间】：2013-01-02 14:01:08

【问题描述】：

可能重复：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>

【参考方案1】：

Firefox 不理解 background-position-y，只理解 background-position（x 和 y 值，按此顺序）。

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

【讨论】：

这是真的。自己用精灵表遇到了这个问题。原来是一个真正的麻烦。

@lunchmeat317，你最后做了什么？那么IE9s的行为呢？刚刚尝试为backgroundPosition 制作动画，但没有成功...

你也可以看看this question。