jquery IE Fadein 和 Fadeout Opacity

Posted

技术标签:

【中文标题】jquery IE Fadein 和 Fadeout Opacity【英文标题】:jquery IE Fadein and Fadeout Opacity 【发布时间】:2010-11-20 00:40:39 【问题描述】:

我在 IE 中遇到了这个奇怪的问题,我正在申请一个灯箱。基本上,我在 jquery 中使用 fadeinfadeout - 问题是除了 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

以上是关于jquery IE Fadein 和 Fadeout Opacity的主要内容,如果未能解决你的问题,请参考以下文章

IE中使用jquery的fadeIn()失效的问题

jQuery fadeIn() 在 IE 中不起作用

jQuery - fadeIn()、fadeOut()、animate()、stop() 和闪烁

jQuery:FadeIn/To 和 SlideDown 新元素

jQuery.fadeIn 和 fadeOut 的 CSS3 替换

fadeIn 和 fadeOut 的 jquery 问题