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

Question

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

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

});

这是一个示例

Answer 1

Firefox 和 Opera 不支持backgroundPositionXand backgroundPositionY（因为它不在相应的规范中。）并且IE8 似乎即使带有background-position.

浏览器支持backgroundPositionX和backgroundPositionY：

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

所以，我建议你使用Brandon Aaron 的 jQuery 插件来支持背景位置的跨浏览器。

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

注意：与评论中建议的不同，CSS3 转换对您没有帮助，因为您需要 IE8 支持。