jQuery animate to transparent

Question

$(\".block li\").hover(
    function(){
        $(this).animate({backgroundColor: \"#000\"});
    },
    function(){
        $(this).animate({backgroundColor: \"#fff         


        

Answer 1

You could use rgba(...) (see browser support here).

var elem = $('#foo')[0];

$({
    r: 0,
    g: 0,
    b: 0,
    a: 1
}).animate({
    a: 0
}, {
    step: function() {
        elem.style.backgroundColor =
            'rgba(' +
                ~~this.r + ',' + ~~this.g + ',' + ~~this.b + ',' +
                ~~(this.a*100)/100 +
            ')';
    },
    duration: 1000
});​

~~ is to floor values, otherwise you'll end up with stuff like rgba(0.1029302....

Answer 2

Why not use the opacity CSS3 tag?

Answer 3

This might work. It prepends a new div with a background color onMouseOver, then it fades out and removes the div onMouseOut.

Example.

Example with list items over an image.

Good luck, hope this helps.