animate() 在 Internet Explorer 中不起作用

Question

我有一个脚本，当按钮悬停时会对其进行动画处理，因此它会弹出，不幸的是我根本无法让它在 IE 中运行。它使用 jQuery，适用于所有其他浏览器。

请看小提琴：http://jsfiddle.net/JHS5g/1/ 我已经尝试尽可能多地模仿我的实际代码，因此留下了一些周围的代码。

$("#main-nav div").hover(function() {
  $(this).stop().animate({
    top: "-40px"
  }, { queue: false, duration: 200 });
}, function() {
  $(this).stop().animate({
    top: "0px"
  }, { queue: false, duration: 200 });
});

我实际上认为这是导致它崩溃的 html 或 css 错误，因为当我自己测试 jquery 代码时它可以工作，但我无法确定它。

我注意到小提琴是红色的一些 html 标记，表示错误？但我还是看不到它。

提前感谢您的帮助

Answer 1

您可以通过将display: inline-block 添加到您正在制作动画的 div 来使其工作

我已经更新了你的JS Fiddle

Answer 2

删除 jQuery。 Updated fiddle

使用基本的:hover psuedoclass 和transition CSS 属性在CSS 中尝试做的事情非常简单。

最好的部分？它甚至可以在旧版本的 IE 中工作（低至 IE7 - 在此之前:hover 不能在不是<a> 的元素上工作），尽管它不会在 IE8 或更低版本中生成动画。

不过没关系，因为过渡很吸引人，不是功能性的，因此不是必需的。此外，它还为那些聪明到不会禁用 Windows 更新的人提供了一点奖励。