jQuery: Animating opacity in IE

Question

Using a div with solid black color to fade out an image underneath it. In Chrome and Firefox, this works fine, however, in IE, it's backwards.

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

This starts at 0% opacity and is supposed to animate to 70% over time. In IE, however, it jumps from 0% to 100%, and then fades back down to 70%.

Looking for a fix for this. Thanks.

Answer 1

In ie I believe the command should be alpha:.70

You may need to write an exception

Answer 2

Try to set the opacity to zero before you animate it:

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

Answer 3

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)+')'}