jquery IE Fadein and Fadeout Opacity

jquery html css internet-explorer opacity
Tom picture Tom · Aug 16, 2009 · Viewed 71.9k times · Source

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

woodstylee picture woodstylee · Aug 24, 2009

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.

Related questions

Slide right to left?

How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right.

Read More
Click button copy to clipboard using jQuery

How do I copy the text inside a div to the clipboard? I have a div and need to add a link which will add the text to the clipboard. Is there a solution for this? <p class="content"&…

Read More
Refresh/reload the content in Div using jquery/ajax

I want to reload a div on click of a button. I do not want to reload the full page. Here is my code: HTML: <div role="button" class="marginTop50 marginBottom"> <input type="button" id="getCameraSerialNumbers" value="…

Read More