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/