jQuery animate to transparent

Question

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

Need to change #fff to no color. Animation should occur from #000 to transparent.

Any solution?

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

Instead of changing background color, remove that attribute!

The code is as simple as:

$("li").hover(
    function(){
        $(this).toggleClass('hover', 1000);
    },
    function(){
        $(this).toggleClass('hover', 2000);
    }
);

Example: http://jsfiddle.net/rdWTE/

For it to work, you need jQuery and jQuery UI. Does exactly what you wanted (except the colors)!

Those numbers in jQuery script stand for animation duration in milliseconds.

EDIT:

Uhm... Found out that toggleClass can bug from time to time. Better to use addClass on hover, and removeClass on mouse out.