animate() not working for opacity in IE

Question

I'm trying to animate a div from 100% opacity to 40% opacity WITHOUT using fadeTo(). I need to use animate().

It works fine in chrome/FF/safari, but in IE, the opacity doesn't animate, it simply changes to that after the animation is done. Happens in IE 7 and 8. I'm doing this:

                .animate({
                    width: new_width,
                    top: new_top,
                    left: new_left,
                    padding: new_padding,
                    opacity: 0.4,
                    filter: "alpha(opacity=40)"
                },

... it's just not animating the opacity. Any ideas?

Answer 1

If you just remove filter: "alpha(opacity=40)" it will work, the opacity: 0.4 is all you need...jQuery takes care of the cross-browser differences here. So your animate call would just be:

.animate({
  width: new_width,
  top: new_top,
  left: new_left,
  padding: new_padding,
  opacity: 0.4
})