jquery IE Fadein and Fadeout Opacity

Question

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.

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

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

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 ?

Answer 1

I had the same problem in IE8. Setting the opacity of the DIV in JavaScript before I called fadeIn() solved the problem:

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

This was using just a plain DIV not a transparent PNG.

Answer 2

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'}).

Answer 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.

Answer 4

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.

Example:

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

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

Answer 5

@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).

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).

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.

Answer 6

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).

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.

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.

How to - example with a 100x100 image:

<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:

    $("#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.

Hope it helps.