jquery IE Fadein和Fadeout不透明度

I am getting this weird problem in IE with a CSS Overlay I am applying for a lightbox. Basically, I use fadein and fadeout for jquery - the problem is that everything works fine EXCEPT in IE.

我在IE中遇到了一个奇怪的问题，我申请了一个lightbox。基本上，我使用fadein和fadeout为jquery——问题是除了IE之外，一切都很好。

In IE - I get no fadein - rather it just goes straight to opacity background.

在IE中-我没有得到fadein -而是直接进入不透明背景。

On fadeout - it removes the "opacity" for < 1 sec second and renders the page a "solid color" before removing the overlay.

在fadeout -它删除了< 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 ?

有人知道如何修复这个bug吗?这真的很烦人——我使用了所有正确的过滤器等等它只是IE中的fadein和fadeout ?

8 个解决方案

#1

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。

#2

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(透明到眼睛)。因为它是画布/容器中的第一个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.

希望它可以帮助。

#3

Hard to tell without exact code, but I know IE has problems with applying fade's on elements with position: relative so if I were you I would check if elements you are trying to fade, either directly or thru their parents, have position: relative applied. Hope it helps.

如果没有精确的代码，很难判断出IE在位置元素上应用渐变的问题:相对的，如果我是你，我会检查你想要渐变的元素是否有位置:相对的应用。希望它可以帮助。

#4

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.

这显然不是所有情况的解决方案，但对我来说是可行的，而且工作得很好。

#5

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可能存在一些问题(在1.4之前?)通过CSS检测不透明度设置。如果在对不透明度(fadeIn、fadeOut、fadeTo和animate)进行动画处理之前，使用jQuery设置元素的不透明度，则似乎没有问题。与之类似，您可以为支持它的浏览器使用CSS设置不透明度，然后还可以使用jQuery设置不透明度，这样在IE中就可以正常工作了。这也是显示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

#6

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并没有应用这个脚本。我把这段代码复制到一个webhost和BAM!,完美的工作。我不知道为什么IE8会这样做，但我认为这是开发者不喜欢IE的另一个原因。

Maybe that's just me.

也许这只是我。

#7

@LoveMeSomeCode (I can't reply directly to your post since * 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(我无法直接回复您的帖子，因为*显然认为我需要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).

我注意到，当人们浏览我在工作中开发的网站时，会有各种奇怪的行为。在玩了一些游戏之后，我发现IE8有一个设置，它可以让所有的本地页面都显示在兼容性视图中!不管您的文档声明或标记有多严格，IE8将对所有内部网页面使用兼容性视图(我认为localhost是相同的)。

Click Tools > Compatibility View Settings > Untick the box that says "Display intranet sites in Compatibility View"

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

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.

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

#8

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({不透明度:0})，您必须使用。animated({不透明度:'hide'})。