jQuery fadeIn doesn't work in IE.

Question

I'm using fadeIn to fade in my BG DIV's.

example: http://commonmovement.com/MIP/about-mip.html

This works in all browsers except IE, where it just "pops" on. Not sure how to fix this.

I tried using:

$('#main.about_main').css('filter', 'alpha(opacity=0)'); $('#main.about_main').fadeIn(2000);

but no luck.

CSS:

#main { height:100%; width:100%; padding:0; }

#main.about_main {display: none;}

Anyone know how to fix this?

Thanks

Answer 1

$('#main.about_main').css('filter', 'alpha(opacity=0)');

The DIV is transparent. Then how can it be seen?

Answer 2

Is that first line with the filter necessary? Have you tried it without? The display:none in the style sheet should be enough.

Answer 3

Try the following:

$('#main').hide().fadeIn(2000);

Answer 4

I guess your problem is not with IE, it's performance.

In my IE 8 worked just fine, but a pretty slow and ugly transition. On Chrome was pretty fluid

As you go to IE 7 or even 6 the performance should slower, because big DIV animation demands more from the browser.

Can you test this under IE 9? Or even on IE 8 on a machine with better CPU + RAM?

Answer 5

check this http://stackoverflow.com/questions/353100/jquery-fadein-fadeout-effects-in-ie