动画在 IE 中失败答案

【问题标题】：Animations failing in IE动画在 IE 中失败
【发布时间】：2012-02-28 21:47:39
【问题描述】：

我正在尝试创建一个 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，你可以修复它：

$('.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。

希望对你有所帮助。

【讨论】：