前言

一提到淡入淡出效果，大家可能會想到jQuery的fadeIn(),fadeOut()和fadeToggle()函式，它們被封裝到庫中，很方便被呼叫。但是有時候只為了一個簡單的淡入淡出效果，並不需要去呼叫龐大的jQuery庫，所以，下面我們用純js程式碼實現淡入淡出的效果。

需求分析

要實現淡入淡出效果，就是要使用到setInterval()函式，改變element節點透明度opacity，來解決這個問題。

功能實現

fadeIn()和fadeOut()都有三個引數，分別是事件（必填），淡入淡出速度（正整數，可選），最後是透明度值（0~1，可選）。所以我們先編寫html的內容和淡入的函式宣告。

<!-- html -->
<button onclick="btnIn()">淡入</button>   //點選實現淡入功能
<button onclick="btnOut()">淡出</button>   //點選實現淡出功能
<div id="div1" style="width:80px;height:80px;background-color:green;opacity: 1;"></div>

function fadeIn(element,speed){
            /*
            * 引數說明
            * element==>需要淡入的元素
            * speed==>淡入速度,正整數(可選)
            */
 

}
function fadeOut(element,speed){

}

下面是建立setInterval()函式：

function fadeIn(element，speed){
        var speed = speed || 30 ;
        var num = 0;
        var st = setInterval(function(){
        num++;
        element.style.opacity = num/10;
        if(num>=10)  {  clearInterval(st);  }
        },speed);
}

function
 
 btnIn(){
    fadeIn(div1,100);   //第二個引數是設定speed,預設為30，可自由修改
}

以上就能實現一個簡單的淡入功能了。同理，我們可以類似的將淡出功能也做出來。

function fadeOut(element){
        var speed = speed || 30 ;
        var num = 10;
        var st = setInterval(function(){
        num--;
        element.style.opacity = num / 10 ;
        if(num<=0)  {   clearInterval(st);  }
        },speed);
}

function btnOut(){
    fadeOut(div1,100);
}

不知道你有沒有發現，以上程式碼沒有經過判斷就進行了淡入/淡出，這是不符合常理的，所以我們加入一個判斷，讓它不會一直進行淡入/淡出。最後程式碼如下：

<!-- html -->
<button onclick="btnIn()">淡入</button>
<button onclick="btnOut()">淡出</button>
<div id="div1" style="width:80px;height:80px;background-color:green;opacity: 1;"></div>

//JavaScript 
function fadeIn(element,speed){
    if(element.style.opacity !=1){
        var speed = speed || 30 ;
        var num = 0;
        var st = setInterval(function(){
        num++;
        element.style.opacity = num/10;
        if(num>=10)  {  clearInterval(st);  }
        },speed);
    }
}

function fadeOut(element){
    if(element.style.opacity !=0){
        var speed = speed || 30 ;
        var num = 10;
        var st = setInterval(function(){
        num--;
        element.style.opacity = num / 10 ;
        if(num<=0)  {   clearInterval(st);  }
        },speed);
    }

}

function btnIn(){
    fadeIn(div1,100);
}

function btnOut(){
    fadeOut(div1,100);
}

以上程式碼可以直接複製過去使用了，下面是效果圖