动画在IE中失败

Question

jsFiddle

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

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

动画由

执行

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

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

Answer 1

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

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

编辑

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

希望这会对你有所帮助。

Answer 2

这些因素综合起来：

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

Answer 3

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

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

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

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

或者你可以直接在CSS中使用过滤器我猜，正如Amar所​​说......（但后来CSS验证失败了）