jQuery的：动画backgroundPosition奇怪的行为在IE <9

Question

尝试将鼠标悬停在Internet Explorer 8中的“取消”按钮：

http://jsfiddle.net/HYDKa/

你会发现，你将鼠标悬停在它的第一次，它跳跃你可以看到“确定”按钮，但它会自行修正。不过，后续的悬停功能正常运行。

请注意，这个错误也发生在“确定”按钮; “取消”按钮更为明显。另外，这个错误出现在IE 6和7中，但是我提供的演示程序将不起作用，因为图像是Base64编码的。

当然，该代码在非IE浏览器中工作正常。

这是一个jQuery的bug？除了分割图像之外，我还能做些什么来解决它？我可以包含IE < 9的样式表，但如果不需要，我宁愿不要。

谢谢！

Answer 1

阅读this后，我结束了改变 “backgroundPosition” 到 “背景位置-X” 解决我的问题。此外，由于某些浏览器不支持“background-position-x”，我创建了CSS3转换以执行相同的操作，然后将JavaScript代码包装在if语句中，以便只在浏览器不支持CSS3转换时才运行。我没有在我的网站上的任何其他地方使用功能检测，并且我不想用Modernizr这么简单的事情来打扰，所以我使用了here所示的功能。我应该注意的另一件事是，我根本没有必要完全打扰“sliding_link_original_background_position”变量。

我很欣赏barlasapaydin的时间以及阅读本文的其他人的时间。谢谢！

Answer 2

旧的Internet Explorer版本不会接受没有'px'的CSS值。 example = width：10px;

因此，您需要在动画值的末尾添加+'px'。

Here is working jsfiddle

$(this).find('.sliding_link_image').animate({ 
     'backgroundPosition': (sliding_link_original_background_position + 10) + 'px'//<--here 
    }, 150); 
}, function() { 
    $(this).find('.sliding_link_image').animate({ 
     'backgroundPosition': sliding_link_original_background_position + 'px'//<--and here 
    }, 150);