JQuery IE <div> opacity problem

Question

I have a problem with IE. I have a layer that has this style to make it transparent and fullscreen.

position:absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: #000000;
filter:alpha(opacity=50); 
-moz-opacity: 0.5; 
opacity: 0.5;
z-index: 1;

And i use the JQuery method fadeIn and fadeOut to show and hide it. Well all well in Opera locks great but IE7 Just overides the style and sets it to 100% opacity. it dosent even fade!!

Answer 1

Peter-Paul Koch has a fantastic article on opacity. In general, quirksmode.org is the first place I go to solve browser-compatibility issues; PPK's done a great deal of research. That said, you look like you have all the right styles in place - is jquery's fadein implementation not doing the right thing, even when you give it a target opacity?

Could you solve the problem by setting the declared CSS to fully-opaque but visible:false, and then use fadeto to get to the target opacity?

Answer 2

When I need to do IE specific things I usually go for the filters built into IE6 and 7. Take care to only feed this to IE though. Apply a little elbow grease and you can make a custom animation with jQuery too I think.

*object*.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=*value*,opacity=*value*)';

MSDN: Opacity attribute

Answer 3

please use like :

.abc{
opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first! for ie8
 filter: alpha(opacity=50);     // second! for other ie versions
}