Tips #2: Animating opacity with jQuery? Don’t forget to set your opacity before animating

Animating opacity with jQuery can be a little tricky. If you look closely, the first opacity animation might not happen. You would think that $(‘element’).animating({opacity:0}) would do the trick, but actually that is not really the case. When you animate opacity always remember to set the default opacity before, in CSS you can add opacity:0 to your element.

However, if you remember, Internet Explorer 6 and 7 do not support CSS opacity, they support the weird, IE only, filter:alpha(opacity=70). Unfortunately for us, that will not do the trick and the first opacity animation will not happen.

So there is only one cross browser way to do this that I know, in your DOM ready, add $(‘element’).css(“opacity”, 0).

Hope it helps!