jQuery：动画 backgroundPosition 在 IE < 9 中表现异常答案

【问题标题】：jQuery: animating backgroundPosition behaves oddly in IE < 9jQuery：动画 backgroundPosition 在 IE < 9 中表现异常
【发布时间】：2012-07-07 11:17:23
【问题描述】：

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

http://jsfiddle.net/HYDKa/

您会注意到，当您第一次将鼠标悬停在它上面时，它会跳跃并且您可以看到“确定”按钮，但随后它会自行更正。不过，随后的悬停功能正常。

请注意，“确定”按钮也会出现此错误； “取消”按钮更明显。此外，这个错误存在于 IE 6 和 7 中，但我提供的演示无法运行，因为图像是 Base64 编码的。

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

这是一个 jQuery 错误吗？除了拆分图像之外，我还能做些什么来解决它？我可以包含 IE

谢谢！

【问题讨论】：

标签： jquery internet-explorer jquery-animate

【解决方案1】：

旧 Internet Explorer 版本不接受没有“px”的 CSS 值。示例= 宽度：10 像素；

所以您需要在动画值的末尾添加 + '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);

【讨论】：

bug 似乎仍然存在。您是否在 Internet Explorer 8 中尝试过您的代码？
我刚刚在 IE 8 中再次尝试了您的链接，但它肯定不起作用。请记住，该错误仅在您第一次将鼠标悬停在按钮上时发生。之后，它们正常工作。如果您确定您的链接在 IE 8 中有效，请问您运行的是哪个版本的 Windows？
windows 7.. stackoverflow.com/questions/11200515/… 阅读 cmets mate，这里也有同样的问题.. 可能你的浏览器有问题 /:
Here 是您的代码在 Windows XP 上的 IE 8 中无法运行的屏幕截图。我也在 Windows 7 上的 IE 8 中尝试过，但在那个环境中也没有。
m8 你的操作系统真的太旧了 /: 抱歉无法帮助 ://

【解决方案2】：

阅读this 后，我最终通过将“backgroundPosition”更改为“background-position-x”解决了我的问题。此外，由于某些浏览器不支持“background-position-x”，我创建了 CSS3 转换来做同样的事情，然后将 JavaScript 代码包装在 if 语句中，以便它仅在浏览器不支持 CSS3 转换时运行.我没有在我的网站上的其他任何地方使用特征检测，我不想为这么简单的事情打扰 Modernizr，所以我使用了here 显示的功能。我应该注意的另一件事是，我根本不需要为“sliding_link_original_background_position”变量而烦恼。

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

【讨论】：