为什么我的 jquery 脚本动画不起作用？

【问题标题】：Why my jquery script animate doesn't work?为什么我的 jquery 脚本动画不起作用？
【发布时间】：2013-02-02 05:30:55
【问题描述】：

这里是简单的背景位置动画。为什么鼠标移开的 IE 8 不对其进行动画处理？ Opera 和 Firefox 不显示任何操作，只有 Chrome 做得很好。如何让它在所有最新版本的浏览器上工作？

$(function(){
$(".call_order").hover(function() {
    $(this).stop().animate({
        backgroundPositionX: "-300"
    }, 100);
} , function() { 
    $(this).stop().animate({
        backgroundPositionX: "0"
    }, 100);
});

});

Here is a sample

【问题讨论】：

Firefox 无法识别background-position-x，只能识别组合的background-position: xvalue yvalue。可能其他浏览器都一样。
为什么不使用 css transform 和 css transition 而不是使用 jquery？
Alexander，如果下面的回答没问题，请采纳。

标签： jquery jquery-animate browser-support

【解决方案1】：

Firefox 和 Opera 不支持 backgroundPositionX 和 backgroundPositionY（因为它不在相应的规范中。）和 IE8 seems to be buggy 即使是 background-position。

浏览器支持为backgroundPositionX 和backgroundPositionY：

浏览器版本 ---------------------------- 不支持歌剧不支持火狐野生动物园 3+ 浏览器 4+ Chrome 是（版本未知）

所以，我建议你使用Brandon Aaron's jQuery plug-in 来获得对背景位置的跨浏览器支持。

如果您检查代码；它首先测试backgroundPositionX 属性并查看浏览器是否支持它。如果不;它从 backgroundPosition 属性中解析出 X 和 Y 值。

注意：与 cmets 中建议的不同，CSS3 将 would not be helpful 转换给您，因为您需要 IE8 支持。

【讨论】：