动画在 IE 中失败

Posted 2023-03-06

【中文标题】动画在 IE 中失败

【英文标题】：Animations failing in IE

【发布时间】：2012-02-28 21:47:39

【问题描述】：

jsFiddle

我正在尝试创建一个 jQuery 插件，它允许我们在标记中添加入口和出口动画。

我的入口动画在 Chrome 和 Firefox 中有效，但在 IE7 或 IE8 中无效

动画由

执行

animate('top':posData.top+'px', 'left': posData.left+'px', 'opacity': 1, speed)

或它的变体（取决于所需的方向）。 posData 被记录到控制台，因此您可以看到可能的值。 speed 设置在插件的开头。

【问题讨论】：

如果您有任何解决方案，请在此处发布。它将帮助面临同样问题的其他人。谢谢。

已经在下面回答了自己，希望对某人有所帮助。

你也可以接受你的回答。

【参考方案1】：

这是这些因素的组合：

hasLayout 所需的元素 需要使用滤镜：alpha(opacity=70);使不透明度正常工作 Chrome 似乎不喜欢 data 属性中的大写字母，这导致我在 javascript 中删除了它们。 Chrome 和 Firefox 对此很满意，但 IE 坚持大小写匹配，因此将 html 中的 data- 属性更改为小写，并确保它们的 JS 对应项匹配。

【参考方案2】：

如果你使用 jQuery .css() 将不透明度设置为 0，你可以修复它：

http://jsfiddle.net/meo/UtbSY/1/

$('.animate').anim().css("opacity": 0);

jQuery 正在为有问题的浏览器使用正确的不透明度过滤器。

或者你可以直接使用 CSS 中的过滤器，正如 Amar 所提到的那样......（但是 CSS 验证失败）

【参考方案3】：

IE8 和 IE7 不支持 CSS2 - opacity，您需要 filter: alpha(opacity=70);。请阅读更多详情here。

在您的 jsFiddle 中，您正在更改 div 的不透明度。由于 IE8 和 IE7 不支持opacity，所以您看不到任何动画。

编辑

查看此this 在 SO 上的帖子。它提到了解决问题的hasLayout。

希望对你有所帮助。