jquery IE Fadein和Fadeout Opacity

Question

我正在使用CSS Overlay在IE中遇到这个奇怪的问题我正在申请一个灯箱.基本上,我使用fadein和fadeoutjquery - 问题是一切正常,除了IE.

在IE中 - 我没有得到任何淡化 - 而是直接进入不透明背景.

在淡出时 - 它会删除"不透明度"<1秒,并在删除叠加层之前将页面呈现为"纯色".

任何人都知道如何解决这个错误？它真的很烦人 - 我正在使用所有正确的过滤器等它只是IE中的淡入淡出和淡出？

Answer 1

我在IE8中遇到了同样的问题.在调用fadeIn()之前在JavaScript中设置DIV的不透明度解决了这个问题:

$('.overlay').css('filter', 'alpha(opacity=40)');
$('.overlay').fadeIn(500);

这只是使用普通的DIV而不是透明的PNG.

Answer 2

也许对你来说这是一个很好的解决方案(对我而言).解决方案简单但有效(而且非常好).当它的父级背景没有颜色(完全透明)时,IE存在alpha透明度问题.

我们在这里做的(见下面的例子)是首先添加一个几乎透明的div(对眼睛是透明的).因为它是canvas/container中的第一个div(例如= = div)并且它是绝对放置的,所以此div之后的所有内容都将放在第一个div的顶部,因此这将成为所有其他内容的背景在这个画布里面.

因为现在有背景,IE在淡入或淡出(更改不透明度时)或将画布的不透明度设置为低于100时,不会显示令人讨厌的黑点(像素)或黑色区域.

如何 - 例如100x100图像:

<div id="mycanvas" style="display:none;">
<div style="position:absolute; background:#FFF; display:block; filter:alpha(opacity=1); opacity:0; width:100px; height:100px;">
</div>
<img id="myImage" src="example.png" width="100" height="100"/>
</div>

使用jQuery淡入或淡出图像:

    $("#mycanvas").fadeIn("slow", function() 
{setTimeout(function(){$("#mycanvas").fadeOut("slow");},2000 );}
);

这也是可能的:

$("myImage").fadeIn("slow");

而已!

不错的是,这个解决方案也适用于VML/SVG(Raphael)或其他具有alpha透明度的内容.此外,您不必更改/破解您的JS代码,因为这种"黑客"不会影响其他浏览器.

希望能帮助到你.