js div层淡出淡入效果

代码如下，主要是利用了setTimeout方法和递归思想不断改变div的透明度：
这里将div写死在函数里了，可以在函数参数里增加div元素为参数以提高通用性，
var　messageDiv = document.createElement("div");
var setOpacity = function(opacity){
    messageDiv.style.opacity = opacity;
   }
 var fadeIn = function(maxOpacity,speed){
    speed = speed || 20;
       maxOpacity = maxOpacity || 1;//弹入时的最大透明度
       var value = 0;//透明度从零开始
       (function(){
        setOpacity(value);
        value +=0.05;//每次执行透明度增加0.05
        if (value <= maxOpacity){//达到最大值时，停止递归
         setTimeout(arguments.callee,speed);//arguments.callee即函数调用者，这里就是匿名函数function()
        }
       })();
   }
   
   var fadeOut = function(minOpacity,speed){
    speed = speed || 100;
       minOpacity = minOpacity || 0;
       var value = 1;
       (function(){
        setOpacity(value);
        value -=0.05;
        if (value >= minOpacity){
         setTimeout(arguments.callee,speed);
        }
        else if(value <=0 || value <=minOpacity){
         document.body.removeChild(messageDiv);
        }
       })();
   }
其实那种div层的slide效果运用的手段也类似，只是更改的不是透明度，而是宽度和高度而已，所以理解其中的思想和原理才是最重要的。