css - 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

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

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