jquery IE 淡入淡出不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1284163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery IE Fadein and Fadeout Opacity
提问by woodstylee
I am getting this weird problem in IE with a CSS Overlay I am applying for a lightbox. Basically, I use fadeinand fadeoutfor jquery - the problem is that everything works fine EXCEPT in IE.
我在 IE 中遇到了这个奇怪的问题，我正在申请一个灯箱。基本上，我使用fadeinand fadeoutfor jquery - 问题是一切正常，除了IE.
In IE - I get no fadein - rather it just goes straight to opacity background.
在 IE 中 - 我没有淡入淡出 - 而是直接进入不透明背景。
On fadeout - it removes the "opacity" for < 1 sec second and renders the page a "solid color" before removing the overlay.
在淡出时 - 它会在 < 1 秒内移除“不透明度”，并在移除叠加层之前将页面呈现为“纯色”。
Anyone know how to fix this bug ? Its really annoying - I am using all the correct filters etc its just the fadein and fadeout in IE ?
有谁知道如何修复这个错误？它真的很烦人 - 我使用了所有正确的过滤器等，它只是 IE 中的淡入和淡出？
回答by woodstylee
I had the same problem in IE8. Setting the opacity of the DIV in JavaScript before I called fadeIn() solved the problem:
我在 IE8 中遇到了同样的问题。在调用fadeIn()之前在JavaScript中设置DIV的不透明度解决了这个问题：
$('.overlay').css('filter', 'alpha(opacity=40)');
$('.overlay').fadeIn(500);
This was using just a plain DIV not a transparent PNG.
这只是使用一个普通的 DIV 而不是透明的 PNG。
回答by Erwinus
maybe is this a good solution to you (for me it is). The solution is simple but effective (and very nice). IE has problems with alpha transparency when the background of it's parent has no color (total transparency).
也许这对你来说是一个很好的解决方案（对我来说是）。该解决方案简单但有效（而且非常好）。当 IE 的父背景没有颜色（完全透明）时，它的 alpha 透明度会出现问题。
What we do here (see example below) is to add a div first that is almost transparent (transparent to the eye). Because it is the first div inside the canvas/container (=> a div for example) and it is placed absolute, all content after this div will be placed on top of the the first div, so this becomes the background of all other content inside this canvas.
我们在这里做的（见下面的例子）是首先添加一个几乎透明（对眼睛透明）的 div。因为它是canvas/container中的第一个div（例如=> a div）并且是绝对放置的，所以这个div之后的所有内容都会放在第一个div的上面，所以这成为所有其他内容的背景在这个画布里面。
Because there is a background now, IE shows no nasty black spots (pixels) or black area's when fading in or out (when changing opacity) or when set the opacity of the canvas to a value below 100.
因为现在有背景，IE 在淡入或淡出（更改不透明度时）或将画布的不透明度设置为低于 100 的值时，不会显示令人讨厌的黑点（像素）或黑色区域。
How to - example with a 100x100 image:
如何 - 以 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>
To fade in or fade out the image with jQuery:
要使用 jQuery 淡入或淡出图像：
$("#mycanvas").fadeIn("slow", function()
{setTimeout(function(){$("#mycanvas").fadeOut("slow");},2000 );}
);
This is also possible:
这也是可能的：
$("myImage").fadeIn("slow");
That's it!
就是这样！
Nice thing is that this solution also works with VML/SVG (Raphael) or other content that has alpha transparency. Also you don't have to change/hack your JS code, because this "hack" does not effect other browsers.
不错的是，这个解决方案也适用于 VML/SVG (Raphael) 或其他具有 alpha 透明度的内容。此外，您不必更改/破解您的 JS 代码，因为此“破解”不会影响其他浏览器。
Hope it helps.
希望能帮助到你。
回答by morewry
In the situation I observed this issue I was able to partially fix it using the method outlined by @Erwinus. Use of that technique made the halo far less ugly, but an odd black aura could still be seen.
在我观察到这个问题的情况下，我能够使用@Erwinus 概述的方法部分修复它。使用了那个技巧，光环的丑陋程度大大降低，但仍然可以看到一种奇怪的黑色气息。
I was able to apply a background to the image itself,
我能够为图像本身应用背景，
#slideshow img{background:#FFF url("image/background-of-slideshow.jpg") no-repeat -15px -35px;}
And this fixed the problem perfectly. I stuck it in my iefix.css file that is included via conditional comments. It required no extra HTML and provided an even nicer fade effect than the other solution.
这完美地解决了这个问题。我把它放在通过条件注释包含的 iefix.css 文件中。它不需要额外的 HTML，并且提供了比其他解决方案更好的淡入淡出效果。
This would obviously not necessarily be the solution for all cases, but was viable for mine and worked well.
这显然不一定适用于所有情况，但对我来说是可行的并且运行良好。
回答by styol
Here is another potential fix to this issue... jQuery supposedly has some issues (prior to 1.4?) with detecting opacity set via CSS. It appears to not have issues if you set the opacity of the elements using jQuery prior to animating the opacity (fadeIn, fadeOut, fadeTo, and animate). As in, you can both set the opacity using CSS for the browsers that support it and then also stack on top of that setting the opacity using jQuery and it should then work properly in IE. This is also the case for display none.
这是此问题的另一个潜在解决方案...... jQuery 据说在检测通过 CSS 设置的不透明度时存在一些问题（1.4 之前？）。如果在为不透明度设置动画（fadeIn、fadeOut、fadeTo 和 animate）之前使用 jQuery 设置元素的不透明度似乎没有问题。如在，您既可以使用 CSS 为支持它的浏览器设置不透明度，然后也可以叠加使用 jQuery 设置不透明度，然后它应该可以在 IE 中正常工作。这也是 display none 的情况。
Example:
例子：
$('#element').css("opacity","0").fadeIn("slow");
Source: http://www.boagworld.com/forum/comments.php?DiscussionID=3555#Item_3
来源：http: //www.boagworld.com/forum/comments.php?DiscussionID= 3555#Item_3
回答by LoveMeSomeCode
Ok, I had issues with this and none of the solutions I found online worked. It was driving me crazy because if you look at the W3C site: http://www.w3schools.com/Css/css_image_transparency.asp, it worked in IE8. But I copy it to my dev environment it doesn't.
好的，我遇到了这个问题，而且我在网上找到的解决方案都没有奏效。这让我发疯，因为如果您查看 W3C 站点：http: //www.w3schools.com/Css/css_image_transparency.asp，它可以在 IE8 中运行。但是我将它复制到我的开发环境中，它没有。
I had this code:
我有这个代码：
<script type="text/javascript">
$(document).ready(function() {
$('.disabled').fadeTo("slow", 0.33);
});
</script>
And this markup:
这个标记：
<a href='homestarrunner.com' class='disabled'>
<img src='http://www.w3schools.com/Css/klematis.jpg' /></a>
It worked in FF, Chrome, everything BUT IE8.
它适用于 FF、Chrome 以及除 IE8 之外的所有内容。
What we ended up realized was the IE8 was not applying the script when running against localhost. I copied this code up to a webhost and BAM!, works perfectly. Don't know why IE8 does this, but I see it as one more reason for devs to dislike IE.
我们最终意识到 IE8 在针对本地主机运行时没有应用脚本。我将此代码复制到网络主机和 BAM！，完美运行。不知道为什么 IE8 会这样做，但我认为这是开发人员不喜欢 IE 的另一个原因。
Maybe that's just me.
也许这只是我。
回答by Lev
@LoveMeSomeCode (I can't reply directly to your post since stackoverflow apparently thinks I need X amount of reputation because I can response to someone's message - why?!?!) I believe this is because a really lame feature that comes with IE8's "compatibility view" (yes, even lamer than the mode itself).
@LoveMeSomeCode（我无法直接回复您的帖子，因为 stackoverflow 显然认为我需要 X 声望，因为我可以回复某人的消息 - 为什么？！？！）我相信这是因为 IE8 附带的一个非常蹩脚的功能“兼容性视图”（是的，甚至比模式本身还要差）。
I noticed that folks were getting all sorts of weird behavior when viewing the website I develop at work (when on IE). After some playing around, I discovered IE8 has a setting which OUT-OF-THE-BOX sets all local pages to display in compatibility view! Regardless of your document declaration or how strict your markup is, IE8 will use compatibility view for all intranet pages (and I suppose localhost is the same).
我注意到人们在查看我在工作中开发的网站时（在 IE 上）时会出现各种奇怪的行为。经过一番折腾，我发现 IE8 有一个设置，即 OUT-OF-THE-BOX 将所有本地页面设置为在兼容性视图中显示！无论您的文档声明或标记有多严格，IE8 都会对所有内联网页面使用兼容性视图（我认为 localhost 是相同的）。
Click Tools > Compatibility View Settings > Untick the box that says "Display intranet sites in Compatibility View"
单击工具 > 兼容性视图设置 > 取消勾选“在兼容性视图中显示 Intranet 站点”框
Why on earth this is enabled by default I have no idea, but it has caused a whole lot of hassle with isolating and then telling people to fix.
为什么在默认情况下启用此功能我不知道，但它在隔离然后告诉人们修复方面造成了很多麻烦。
回答by Jerome
Also have prob using this junk Browser.
也有可能使用这个垃圾浏览器。
You can also check when the browser is IE instead of using .animate({opacity:0})you will have to use .animate({opacity:'hide'}).
您还可以检查浏览器何时是 IE 而不是使用.animate({opacity:0})您将不得不使用.animate({opacity:'hide'}).
回答by spirytus
Hard to tell without exact code, but I know IE has problems with applying fade's on elements with position: relativeso if I were you I would check if elements you are trying to fade, either directly or thru their parents, have position: relativeapplied. Hope it helps.
没有确切的代码很难说，但我知道 IE 在元素上应用淡入淡出时有问题，position: relative所以如果我是你，我会检查你试图淡化的元素是否直接或通过它们的父母position: relative应用。希望能帮助到你。
