JavaScript -Change CSS color for 5 seconds - 如何添加缓动效果？

Question

引用这个问题:-

JavaScript -Change CSS color for 5 seconds

答案的工作演示:-

http://jsfiddle.net/maniator/dG2ks/

我需要知道如何为其添加缓动效果，以便颜色慢慢地变得 100% 不透明并同样变得 100% 透明。

Answer 1

代码

function makeRGBStr(obj) {
    if (obj.a == null) return "rgb(" + obj.r + "," + obj.g + "," + obj.b + ")";
    else return "rgba(" + obj.r + "," + obj.g + "," + obj.b + "," + obj.a + ")";
}


window["highlight"] = function(obj, color) {
    var highlightColor = color || {
        "r": 255,
        "g": 0,
        "b": 0
    };


    var orig = obj.style.backgroundColor;
    var curAlpha = 1;
    obj.style.backgroundColor = makeRGBStr(highlightColor);
    setTimeout(function() {
        curAlpha -= 0.1;
        var newColor = highlightColor;
        newColor.a = curAlpha;
        obj.style.backgroundColor = makeRGBStr(newColor);

        if (curAlpha <= 0) {
            obj.style.backgroundColor = orig;
        }
        else {

            setTimeout(arguments.callee, 100);
        }
    });
}

jsFiddle:http://jsfiddle.net/dG2ks/32/

一些例子

• 突出显示特定的 $_GET 变量是否存在:代码:http://jsfiddle.net/dG2ks/36/ , 查看实际效果:http://jsfiddle.net/dG2ks/36/show/?someVar=there

• 突出显示表格单元格:http://jsfiddle.net/dG2ks/38/

• 用不同颜色突出显示所有表格单元格:http://jsfiddle.net/dG2ks/40/