Question

我在Internet Explorer上使用jQuery FadeIn遇到了设计问题：

我有一个从页面的底部到中心动画的div，我需要实现div突然淡入的效果并激活到页面的中心。我使用jQuery FadeIn得到了这个效果，但是我在Internet Explorer（7,8）上失去了div的透明度，在Firefox上运行正常。

这是我用来为div提供透明度的CSS代码（这是一个应用于div的类）

display:none;
filter:alpha(opacity=90); 
-moz-opacity: 0.9;
opacity: 0.9;

然后，通过javascript我使div出现（淡出）：

$(Popup).fadeIn(700);
$(Popup).css({
    "filter": "alpha(opacity=90)",
    "-moz-opacity": "0.9",
    "opacity": "0.9" });
//popup falling
$(Popup).animate({ 
                marginTop: '+=' + (windowHeight / 2 - popupHeight / 2) + 'px'
            }, 1000 );

正如您所看到的，我尝试将CSS属性重新设置为div，但它也不起作用。

提前致谢。

Answer 1

您的CSS属性正在被分配，但是会立即被fadeIn的持续操作覆盖，这是异步完成的。您需要使用回调机制链接动画，以便它们不会竞争（除非您希望它们同时发生）。无论如何，您应该将CSS重新分配移动到fadeIn的回调。

$(Popup).fadeIn(700, function() {
   $(this).css({ ... });
});

Answer 2

你应该使用jQuery的fadeTo，而不是fadeIn：

$(Popup).fadeTo(700, 0.9);

Answer 3

使用jQuery fadeTo函数：http://api.jquery.com/fadeTo/

取代：

$(Popup).fadeIn(700);

使用：

$(Popup).fadeTo(700,0.9);

jQuery FadeIn在IE上失去了透明度

3 个答案: