jquery IE Fadein 和 Fadeout Opacity

Posted 2023-03-06

【中文标题】jquery IE Fadein 和 Fadeout Opacity

【英文标题】：jquery IE Fadein and Fadeout Opacity

【发布时间】：2010-11-20 00:40:39

【问题描述】：

我在 IE 中遇到了这个奇怪的问题，我正在申请一个灯箱。基本上，我在 jquery 中使用 fadein 和 fadeout - 问题是除了 IE 之外，一切正常。

在 IE 中 - 我没有渐变 - 而是直接进入不透明背景。

在淡出时 - 它会在

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

【问题讨论】：

您是使用透明 .png 作为叠加层还是在纯色背景色上使用 alpha 过滤器？ IE 无法正确淡化透明的 .png，所以这可能会导致您的问题。

请注意，旧 IE 不支持 Alpha 过滤器的许多标签，例如 TR。请参阅本页底部的支持标签列表：msdn.microsoft.com/en-us/library/ms532967(v=vs.85).aspx

【参考方案1】：

也有可能使用这个垃圾浏览器。

您还可以检查浏览器何时为 IE 而不是使用.animate(opacity:0)，您必须使用.animate(opacity:'hide')。

【参考方案2】：

@LoveMeSomeCode（我无法直接回复您的帖子，因为 *** 显然认为我需要 X 数量的声誉，因为我可以回复某人的消息 - 为什么？！？！）我相信这是因为一个非常蹩脚的功能使用 IE8 的“兼容性视图”（是的，甚至比模式本身更薄）。

我注意到人们在查看我在工作中开发的网站时（在 IE 上）时会出现各种奇怪的行为。玩了一段时间后，我发现 IE8 有一个设置，即 OUT-OF-THE-BOX 将所有本地页面设置为在兼容性视图中显示！无论您的文档声明或您的标记有多严格，IE8 都会对所有 Intranet 页面使用兼容性视图（我认为 localhost 是相同的）。

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

为什么默认启用此功能我不知道，但它给隔离然后告诉人们修复带来了很多麻烦。

【参考方案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>

它可以在 FF、Chrome 以及除 IE8 之外的所有设备中运行。

我们最终意识到 IE8 在针对 localhost 运行时没有应用脚本。我将此代码复制到网络主机和 BAM！，完美运行。不知道为什么 IE8 会这样做，但我认为这是开发人员不喜欢 IE 的另一个原因。

也许这就是我。

【参考方案4】：

这是解决此问题的另一个潜在解决方案... jQuery 据说在通过 CSS 检测不透明度设置时存在一些问题（在 1.4 之前？）。如果在对不透明度进行动画处理（fadeIn、fadeOut、fadeTo 和 animate）之前使用 jQuery 设置元素的不透明度，它似乎没有问题。如中，您既可以使用 CSS 为支持它的浏览器设置不透明度，也可以在使用 jQuery 设置不透明度的基础上叠加，然后它应该在 IE 中正常工作。不显示也是这种情况。

例子：

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

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

【参考方案5】：

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

我能够为图像本身应用背景，

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

这完美地解决了这个问题。我将它粘贴在通过条件 cmets 包含的 iefix.css 文件中。它不需要额外的 html，并且提供了比其他解决方案更好的淡入淡出效果。

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

【参考方案6】：

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

我们在这里所做的（见下面的例子）是首先添加一个几乎透明的 div（对眼睛来说是透明的）。因为它是画布/容器中的第一个 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"  />
</div>

使用 jQuery 淡入或淡出图像：

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

这也是可能的：

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

就是这样！

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

希望对你有帮助。

【参考方案7】：

如果没有确切的代码很难说，但我知道 IE 在使用 position: relative 的元素上应用淡入淡出有问题，所以如果我是你，我会检查你试图淡入淡出的元素，无论是直接还是通过他们的父母，有 @ 987654322@ 已申请。希望对您有所帮助。

【参考方案8】：

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

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

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

【讨论】：

但是如果我在背景中使用透明图像呢？这不适用于背景中的透明图像。

这里：使用透明图像时的另一个答案：***.com/questions/1808015/…

好答案！！也可以是链式的，$('.overlay').css('filter', 'alpha(opacity=40)').fadeIn(500);

值得一提的是，在 JS 中进行这种更改并不是绝对必要的。只是调用 jQuery css 函数会将 filter 属性作为内联样式添加到元素中，这就是使其工作的原因。因此，如果您不想添加更多 javascript 代码，您可以像 这样更改您的 HTML