jQuery 动画透明

Question

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

需要将#fff更改为无颜色。动画应从 #000 到 透明 发生。

有什么解决办法吗？

Answer 1

您可以使用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
});​

~~ 是底值，否则你最终会得到像 rgba(0.1029302....