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!!