jquery的IE淡入淡出和不透明度(jquery IE Fadein and Fadeout Op

我得到这个奇怪的问题在IE中使用CSS覆盖我申请一个灯箱。基本上，我使用fadein和fadeout jQuery的-问题是，一切工作正常除IE 。

在IE浏览器 - 我没有得到任何淡入 - 而它只是直不透明的背景。

上淡出 - 它消除了<1秒的第二“不透明度”和除去覆盖之前呈现页面是“纯色”。

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

Answer 1:

我在IE8有同样的问题。设置DIV的不透明度在JavaScript我以前称为淡入（）解决了这个问题：

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

这是使用只是一个普通的DIV不是透明的PNG。

Answer 2:

也许这是一个很好的解决方案，你（对我来说）。该解决方案是简单而有效的（而且很漂亮）。 IE具有阿尔法透明问题，当它的背景的父没有颜色（完全透明）。

我们在这里做（见下面的例子）什么是先添加一个div几乎是透明的（透明的眼睛）。因为它是帆布/容器（=>例如一个div）内的第一个div和它被放置绝对的，这个div之后的所有内容将被放置在第一个div的顶部，所以这成为所有其他内容的背景这里面的画布。

因为现在有一个背景，图1E示出没有讨厌的黑点（像素）或黑色区域的衰落或缩小时（改变不透明度时）或设置在画布的不透明度低于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");

而已！

令人高兴的是，该解决方案还与一些具有alpha透明度VML / SVG（拉斐尔）或其他内容。你也不必改变/破解您的JS代码，因为这种“黑客”不影响其他浏览器。

希望能帮助到你。

Answer 3:

很难说没有确切的代码，但我知道IE浏览器与应用上的元素褪色的问题position: relative ，所以如果我是你，我会检查是否元素，你试图褪色，直接或通他们的父母，有position: relative应用。希望能帮助到你。

Answer 4:

在这种情况我观察这个问题，我能够利用@Erwinus概括的方法部分地解决它。该技术的使用作出的光环远不如丑陋，但一个奇怪的黑色光环仍然可以看到。

我能后台应用到图像本身，

#slideshow img{background:#FFF url("image/background-of-slideshow.jpg") no-repeat -15px -35px;}

而这个完美解决了这一问题。我在通过有条件的意见包括我iefix.css文件卡住了。它不需要额外的HTML并提供比其他解决方案的甚至更好的淡入淡出效果。

这显然不一定适用于所有情况的解决办法，但可行的，对于矿井和运作良好。

Answer 5:

这里是另一个可能的解决这个问题... jQuery的理应有一些问题（之前1.4？）与检测不透明通过CSS设置。这似乎没有问题，如果你设置使用jQuery动画的透明度之前，元素的不透明度（淡入，淡出，fadeTo，和动画）。正如，你既可以使用CSS设置为支持它的，然后也堆叠起来，设置使用jQuery透明度最高的浏览器的不透明度，并应然后IE浏览器正常工作。这也是显示没有这种情况。

例：

$('#element').css("opacity","0").fadeIn("slow");

来源： http://www.boagworld.com/forum/comments.php?DiscussionID=3555#Item_3

Answer 6:

好吧，我有这个，没有我在网上找到工作的解决方案的问题。这是推动我疯了，因为如果你看一下W3C网站： http://www.w3schools.com/Css/css_image_transparency.asp ，它在IE8的工作。但我把它复制到我的开发环境也没有。

我有这样的代码：

 <script type="text/javascript">
       $(document).ready(function() {
        $('.disabled').fadeTo("slow", 0.33);
  });
 </script>

而这个标记：

    <a href='homestarrunner.com' class='disabled'>
<img src='http://www.w3schools.com/Css/klematis.jpg' /></a>

它的工作在FF，铬，一切，但IE8。

我们最终实现了什么打击了本地主机上运行时，IE8不应用脚本。我复制此代码到一个虚拟主机提供商和BAM！完美的作品。不知道为什么IE8做到这一点，但我认为这是一个原因，开发者不喜欢IE浏览器。

也许这就是我。

Answer 7:

@LoveMeSomeCode（？！？！我不能直接从计算器显然认为我需要，因为我可以回应别人的邮件信誉的X量回复到您的文章 - 为什么）我相信这是因为一个非常蹩脚的功能，自带的IE8的“兼容性视图”（是的，比所述模式本身甚至拉默）。

我注意到，人们观看的网站，我在工作中（当IE）发展的时候都拿到各种怪异的行为。一些玩耍后，我发现IE8具有OUT-OF-THE-BOX将所有本地网页兼容性视图中显示的设置！不管你的文档声明或如何严格您的标记是，IE8将使用兼容性视图所有Intranet网页（我猜想本地主机是相同的）。

单击工具>兼容性视图设置>取消选中，说盒子“在兼容性视图中显示Intranet站点”

为什么地球上，这是默认启用的，我不知道，但也造成了一大堆麻烦的隔离带，然后告诉别人来解决。

Answer 8:

同时也有概率使用这种垃圾浏览器。

您还可以检查时，浏览器是IE，而不是使用.animate({opacity:0})你将不得不使用.animate({opacity:'hide'})

文章来源: jquery IE Fadein and Fadeout Opacity