How do I animate a background color to transparent in jQuery?

Question

I can animate from transparent to color, but when I tell jquery to animate the backgroundColor: \'transparent\' it just changes to white. Any idea how to fix this?

Answer 1

I wanted to do this and since I couldn't find it, I hacked it together. This is only for white, suit to your needs:

function animate_bg(ele, from, to) {
    ele.css("background-color", "rgba(255, 255, 255, " + (from += from > to ? -1 : 1) / 10 + ")"); 
    if(from != to)  
        setTimeout(function() { animate_bg(ele, from, to) }, 20);
}

Usage:

$("a").hover(
    function() {return animate_bg($(this), 0, 10)},
    function() {return animate_bg($(this), 10, 0)}
);