jQuery IE淡入淡出透明度

Question

我在应用光箱的CSS叠加层时，在IE中遇到了奇怪的问题。基本上，我使用jquery的fadeIn和fadeOut - 问题在于除了在IE中以外，其他一切都正常。

在IE中- 我没有出现淡入效果 - 而是直接转换为不透明的背景。

在淡出时- 它会在第一秒内移除<1秒的"不透明度"并渲染页面为"实心颜色"，然后移除叠加层。

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

- Tom

---

你是在使用透明的.png文件作为叠加层还是在一个纯色背景上使用alpha滤镜？IE无法正确地淡化透明的.png文件，这可能导致你的问题。 - Pat

请注意，旧版IE不支持一些alpha过滤器的标签，例如TR。请参阅此页面底部所列出的支持标签的列表：http://msdn.microsoft.com/zh-cn/library/ms532967(v=vs.85).aspx - Chris Moschini

Answer 1

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

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

这是使用普通 DIV 而不是透明 PNG。

- woodstylee

---

如果我在背景中使用透明图片会怎样？这在使用透明背景图片时无效。 - gautamlakum

这里有另一个关于使用透明图片的答案：http://stackoverflow.com/questions/1808015/jquery-fadein-ie-png-issue-when-loading-from-external - YOMorales

好的回答！也可以链接起来，$('.overlay').css('filter', 'alpha(opacity=40)').fadeIn(500); - neelmeg

值得一提的是，在JS中进行这种更改并不是必须的。只是调用jQuery的css函数会将filter属性作为内联样式添加到元素中，这就是使其工作的原因。因此，如果您不想添加更多的JavaScript代码，您可以像这样更改您的HTML：<div class="overlay" style="filter:alpha(opacity=40)"> - RTF

Answer 2

也许这对你来说是一个不错的解决方案（对我来说是这样）。这个解决方案简单而有效（而且很好）。当IE的父元素没有颜色（完全透明）时，IE会出现alpha透明度问题。

我们在这里做的（请参见下面的示例）是首先添加一个几乎透明的div（对于肉眼来说是透明的）。因为它是画布/容器内的第一个div（例如），并且它被绝对定位，所以此div后的所有内容都将放置在第一个div上方，因此这成为此画布内所有其他内容的背景。

由于现在有了背景，当淡入或淡出（更改不透明度）或将画布的不透明度设置为小于100的值时，IE不会显示任何讨厌的黑点（像素）或黑色区域。

如何-使用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实现图片的淡入淡出效果：

要实现图片的淡入淡出效果，可以使用jQuery。

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

这也是可能的：

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

就是这样！

好的事情是，这个解决方案也适用于具有alpha透明度的VML/SVG（Raphael）或其他内容。而且你不必改变/破解你的JS代码，因为这个“hack”不会影响其他浏览器。

希望它有所帮助。

- Erwinus

Answer 3

好的，我在这方面遇到了问题，但是我在网上找到的解决方案都没有起作用。这让我很疯狂，因为如果你看一下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>

在Firefox、Chrome和其他浏览器中都能正常工作，但在IE8中却不行。

我们最终意识到的是，当针对本地主机运行时，IE8没有应用脚本。我将这段代码复制到Web主机上，嘭！完美地工作了。不知道为什么IE8会这样做，但我认为这是开发人员更加讨厌IE的另一个原因。

也许只有我这样想。

- LoveMeSomeCode

Answer 4

这里有另一个可能解决此问题的方法...据说 jQuery（1.4之前）在检测通过 CSS 设置的不透明度时存在一些问题。如果您在动画不透明度（fadeIn、fadeOut、fadeTo 和 animate）之前使用 jQuery 设置元素的不透明度，则似乎不会出现问题。也就是说，您可以为支持它的浏览器使用 CSS 设置不透明度，然后在此基础上使用 jQuery 设置不透明度，这样在 IE 中应该可以正常工作。对于 display none 也是如此。

示例：

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

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

- styol

Answer 5

在我观察到这个问题的情况下，我能够部分修复它，使用@Erwinus提供的方法。使用那种技术使得光晕看起来不那么丑陋了，但是仍然可以看到奇怪的黑色光环。

我成功地为图像本身应用了一个背景。

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

这个方法完美地解决了问题。我将它放在我的iefix.css文件中，通过条件注释进行包含。它不需要额外的HTML，并提供了比其他解决方案更好的淡入效果。

显然，这并不一定是所有情况的解决方案，但对于我的情况是可行的，并且效果很好。

- morewry

Answer 6

很难在没有确切代码的情况下确定，但我知道IE在应用淡入淡出效果时会遇到与position: relative元素相关的问题。因此，如果我是你，我会检查你尝试淡化的元素（直接或通过其父元素）是否已应用了position: relative。希望能有所帮助。

- spirytus

Answer 7

@LoveMeSomeCode（我无法直接回复您的帖子，因为stackoverflow显然认为我需要X数量的声望，因为我可以回应某人的消息-为什么？！）我相信这是因为IE8的“兼容性视图”带来了一个非常糟糕的功能（是的，甚至比模式本身还要糟糕）。

我注意到当在IE上查看我在工作中开发的网站时，人们会遇到各种奇怪的行为。经过一些尝试，我发现IE8有一个设置，它默认将所有本地页面设置为显示兼容性视图！无论您的文档声明或标记有多严格，IE8都将对所有内部网页使用兼容性视图（我想localhost也是一样）。

单击“工具”>“兼容性视图设置”>取消选中“在兼容性视图中显示内部网站”的框。

为什么这个默认启用我不知道，但它已经引起了很多麻烦，需要隔离然后告诉人们如何修复。

- SikoSoft

Answer 8

还有一个问题，就是使用这个垃圾浏览器时会出现问题。

如果浏览器是IE，你可以检查一下，而不是使用.animate({opacity:0})，你将需要使用.animate({opacity:'hide'})。

- Jerome