JavaScript 黄色淡出效果

效果请将鼠标移到任意的链接上就能看到

下面直接看代码:

fadeUp=function(element,red,green,blue){
    if(element.fade){
        window.clearTimeout(element.fade);
    }
    var cssValue = "rgb("+red+","+green+","+blue+")";
    element.style.backgroundColor = cssValue;
    //$(element).css("background-color",cssValue);
    if(red == 255 && green == 255 && blue == 255){
        return;
    }
    var newRed = red + Math.ceil((255-red)/10);
    var newGreen = green + Math.ceil((255-green)/10);
    var newBlue = blue + Math.ceil((255-blue)/10);
    var repeat = function(){
        fadeUp(element,newRed,newGreen,newBlue);
    };
    element.fade=window.setTimeout(repeat,100);
}

好,我们来分析一下代码.
背景色用 rgb(red, green, blue) 来设置. 然后用到了一个递归的调用:

    var repeat = function(){
        fadeUp(element,newRed,newGreen,newBlue);
    };

 

递归的结果是背景色的值趋向#ffffff,也就是白色.
递归是通过 setTimeout(function(),time) 这个函数设置延时来实现的.这个函数的意思是每隔time时间片后就执行function()函数.后面的time的单位是毫秒.
clearTimeout()用于清除这个延时.

Enjoy!!