jquery IE Fadein and Fadeout Opacity

Question

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.

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.