JQuery: animating opacity in IE

Question

Use a solid black div to reduce the image below it. In Chrome and Firefox, this works fine, however, in IE, it does the opposite.

$("div#bgcover").animate( {opacity:.70}, 2500);

It starts with an opacity of 0% and revitalizes up to 70% over time. However, in IE, it jumps from 0% to 100%, and then disappears to 70%.

We are looking for a fix for this. Thanks.

Answer 1

Try setting the opacity to zero before reviving it:

$("div#bgcover").css({ opacity: 0.0 }).animate( {opacity:.70}, 2500);

Answer 2

Opacity does not work in IE (older versions). You will need to animate the filter property:

IE

var val = .7;
{filter: 'alpha(opacity = '+(val * 100)+')'}

Answer 3

, , alpha:.70

,