IE中的动画失败

Animations failing in IE

本文关键字：失败 动画 IE      更新时间：2023-09-26

jsFiddle

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

我有在Chrome和Firefox中工作的入口动画，但它们在IE7或IE8 中没有效果

动画由执行

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

或其变体（取决于所需的方向）。posData正在被记录到控制台，以便您可以查看可能的值。speed是在插件开始时设置的。

IE8和IE7不支持CSS2-opacity，您将需要filter: alpha(opacity=70);。请在此处阅读更多详细信息。

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

编辑

请查看SO上的这篇帖子。它提到了解决问题的hasLayout。

希望这对你有帮助。

这是以下因素的组合：

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

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

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

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

jQuery正在为所讨论的浏览器使用正确的不透明度过滤器。

或者你可以直接使用CSS中的过滤器，我想，正如Amar。。。（但CSS验证失败）

相关文章：