純JS實現fadeIn 和fadeOut

CSS相關透明度的設置方式

1. filter:alpha(opacity=50);
2. opacity: 0.5;

opacity: 0.5 This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t. 
filter: alpha(opacity=50) This one you need for IE.

js實現fadeOut, fadeIn, fadeTo

• 參考網址 http://mrthink.net/js-fadeIn-fadeOut-fadeTo/
• 思路：主要的思路就是通過setTimeout函數來設置實時操作，通過每隔一段時間來減小/增加相關元素的透明度從而實現其淡入與淡出的效果
• 代碼如下：

• function setOpacity(elem, opacity) {
      /*
       * elem : The id of the element; 
       * opacity: The value of alpha, which is a decimals.
       */
      if(elem.style.filter) {   //IE
          elem.style.filter = 'alpha(opacity:' + opacity * 100 + ')';
      } else {
          elem.style.opacity = opacity;    
      }
  }
  /*
  function getOpacity(elem) {
      return (elem.style.filter ? elem.style.filter)
  }*/
  function fadeIn(elem, speed) {
      /* 
       * elem, the id of the element;
       * speed, the speed for the fadeIn.(The value lower, the less time needs)
       * opacity, the target opacity will be reach, 0.0 to 1.0
       */
       elem.style.display = "block";
       setOpacity(elem, 0);
  
       var tempOpacity = 0;
       (function(){
           setOpacity(elem, tempOpacity);
           tempOpacity += 0.05;
           if(tempOpacity <= 1) {
               setTimeout(arguments.callee, speed);
               //tempOpacity += 0.05;
           }
       })();
  }
  
  function fadeOut(elem, speed) {
      /* 
       * elem, the id of the element;
       * speed, the speed for the fadeout;
       speed, the speed for the fadein.(The value lower, the less time needs);
       */
       elem.style.display="block";
       var tempOpacity = 1;
       (function(){
           setOpacity(elem, tempOpacity);
           tempOpacity -= 0.05;
           if(tempOpacity > 0) {
               setTimeout(arguments.callee, speed);
               console.log("why");
           } else {
               elem.style.display = "none"; //不可放在匿名函數外面會先執行。
           }
       })();
       //elem.style.display = "none";
  }
  
  function fadeTo(elem, speed, opacity){
      /* elem, the id of the element;
       * speed, the speed to of the fadeTo.(The value lower, the less time needs)
       * opacity, the opacity of the final result;
       */
       var tempOpacity = 0;
       elem.style.display = "block";
       (function(){
           setOpacity(elem, tempOpacity);
           tempOpacity += 0.05;
           if(tempOpacity <= opacity) {
               setTimeout(arguments.callee, speed);
           }
       })();
  }

   

• 這里需要有一個值得注意的，就是在設置定時修改透明度時，這里利用了JS的閉包性質。以圖中fadeOut代碼為例說明，在這個代碼的運行過程中，在fadeOut函數中定義了一個內部的匿名函數來實現定時減小透明度，在匿名函數內部，使用setTimeout來定時的調用匿名函數（arguments.callee,注意這里的arguments的作用域是匿名函數，不是fadeOut),這個方法看似遞歸調用了匿名函數，但是實際上解析器並不是這樣處理的。當fadeOut函數觸發時，運行的過程是：fadeOut函數入棧執行--->匿名函數入棧執行--->匿名函數出棧--->fadeOut函數出棧--->設置的時間到了，匿名函數入棧--->匿名函數出棧--->設置的時間到，匿名函數入棧……；從效率上來看，這樣的過程是更好的，因為減小的函數棧的壓力；同時也可以看到JS閉包的性質了，因為雖然定義tempOpacity的函數fadeOut出棧了，但是后來的匿名還是可以訪問到這個變量。這主要是因為雖然fadeOut函數返回了，其執行環境的作用域鏈被銷毀了， 但是其活動對象（由每個函數的arguments和其他命名參數來初始化得到的）仍然會留在內在中，因為匿名函數中有引用到這個對象（js的內存管理是使用垃圾回收機制的），所以匿名函數也就可以使用這個對象里面的變量了，只有當匿名函數被銷毀時，其活動對象才會被銷毀。