animate opacity in IE on hover wont work

I have a PNG that comes in to help read the menu on hover, but the fade wont work on IE, It wor开发者_Go百科ks great in Chrome and Firefox, I have used PNG-24 as well and PNG-8 nothing is working

$(function() {
      $('#gradient').animate({ "opacity": 0 });

        $('#menu').hover(function() {
            $('#gradient').removeClass('hidden').animate({opacity: '1'}, 400);
        }, function() {
            $('#gradient').animate({filter: '0'}, 400);
        });
    });    </script>

---

IE at least older versions has serious problems combining PNG transparency and CSS transparency.

I think this is fixed in IE9 but I am not sure.

Each on their own works fine but not on the same image object.

---

IE8 and lower do not support the standard CSS opacity attribute.

It does support an alternative method of opacity, using the IE-specific filter attribute, but it is a lot more complex to work with than opacity, since filter deals with a whole range of effects.

However, since you're using JQuery, why don't you use the built-in .fadeIn() and .fadeOut() effects instead - that way, JQuery does all the work for you, including working out how to change the opacity in the browser it's in.

See http://api.jquery.com/category/effects/