01第1節：jQuery淡入淡出概述
#JavaScript#在jQuery中，封裝了一套用於對Html元素執行顯示和隱藏的淡入和淡出效果的方法，目的是讓Html元素顯示/隱藏的更優雅，給用戶一種良好的頁面體驗。
Html元素的淡入和淡出主要是使用fadeIn()和fadeOut()這2個方法實現的。
02第2節：fadeIn()方法的使用
jQuery的fadeIn()方法的主要功能是對已隱藏的Html元素操作的，以淡入的方式將隱藏的元素顯示出來。
fadeIn()方法的基本語法如下：
$(selector).fadeIn(speed,callback);
fadeIn()方法說明如下：
需要在jQuery的選擇器上使用。Speed參數用於設置淡入的速度，取值可以是"slow"、"fast" 或者具體的毫秒數。Callback參數用於設置回調函數，就是淡入效果執行後調用的js函數代碼。下面，我們舉例說明一下fadeIn()方法的具體使用，Html+jQuery代碼如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">function fIn() {$("#div2").fadeIn("slow");$("#div3").fadeIn(4000);}</script></head><body><div><input id="Button1" type="button" value="淡入" onclick="fIn()" /></div><div id="div2" style="width:300px; height:200px; display:none; background-color:#0094ff"></div><div id="div3" style="width:300px; height:200px; display:none; background-color:#808080"></div></body></html>
在此Html代碼中，設置了2個div元素，並設置了寬度和高度，使用fadeIn()方法將div2設置為slow的速度淡入，設置div3為4000毫秒的速度淡入。
運行一下結果，效果如下：
圖1
在圖1中，只顯示了一個「淡入」的按鈕，現在點擊一下這個按鈕。如下圖所示：
圖2
從圖2的結果上看，當點擊按鈕執行fadeIn()方法後，這2個div以不同的速度從顏色上從淡變深慢慢的顯示在頁面上的了，最終完全顯示出來。
03第3節：fadeOut()方法的使用
jQuery的fadeOut()方法的主要功能是將已顯示的Html元素以淡出的方式隱藏起來。Html元素是從有到無的過程。
fadeOut()方法基本語法如下：
$(selector).fadeOut(speed,callback);
這裡的speed與callback與fadeIn()方法的參數含義是一樣的，這裡不再詳細說明。
下面我們列舉一個例子，演示一下fadeOut()方法的使用，代碼如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">function fOut() {$("#div2").fadeOut("fast");$("#div3").fadeOut(3000);}</script></head><body><div><input id="Button1" type="button" value="淡出" onclick="fOut()" /></div><div id="div2" style="width:300px; height:200px;background-color:#0094ff"></div><div id="div3" style="width:300px; height:200px;background-color:#808080"></div></body></html>
在此代碼，使用了fadeOut()的fast和3000的速度來淡出Html元素，執行效果如下：
圖3
在圖3中，是一個已經存在頁面上的2個div的樣子，是正常的顯示狀態。
現在，我們在圖3中點擊一下按鈕，看看這2個div是如何隱藏的：
圖4
由於第一個div使用了fast值，以很快的速度隱藏，隱藏後，下面的div元素頂上去了。
04第4節：fadeToggle()方法的使用
jQuery的fadeToggle()的主要功能是在fadeIn()和fadeOut()方法的效果之間切換。
一個fadeToggle()方法實現fadeIn()和fadeOut()這2個方法的使用，以實現單擊一個按鈕，讓Html元素實現淡入和淡出的效果。
來個例子，驗證一下fadeToggle()方法的功能，jQuery和Html的代碼如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">function fInOut() {$("#div10").fadeToggle(5000);}</script></head><body><div><input id="BtnOutIn" type="button" value="淡入淡出切換" onclick="fInOut()" /></div><div id="div10" style="width:420px; height:340px;background-color:#ffd800"></div></body></html>
這裡使用了fadeToggle()方法來控制同一個div元素的顯示和隱藏。頁面效果如下：
圖5
默認這個div塊是顯示的，當點擊過按鈕之後，變淡並慢慢隱藏掉，再次點擊這個按鈕，就又會慢慢的顯示出來。
05第5節：fadeTo()方法
jQuery中的fadeTo()方法功能主要是針對透明度進行設置的，這樣可以控制Html元素淡入和淡出的透明度，其值可以設置為0-1之間的小數。
fadeTo()方法的基本語法如下：
$(selector).fadeTo(speed,opacity,callback);
speed參數是必須項，指定了效果呈現的時間。它取的值有"slow"、"fast" 或毫秒。
fadeTo()方法中的第3個參數opacity是必需的，該參數的主要功能是將淡入淡出的效果設置透明的度的值。
還是實戰一下，編寫一段Html代碼，使用fadeTo()設置透明度的效果：
<!DOCTYPE html><html><head><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">function fTo() {$("#div1").fadeTo(2000, 0.4);}</script></head><body><input id="Btn300" type="button" value="透明" onclick="fTo()" /><div id="div1" style="background-color:#808080;width:300px; height:200px;"></div></body></html>
在這裡，我們使用了fadeTo()方法對id=div1的元素配置淡入淡出的透明度、速度。效果如下圖所示：
圖6
在上圖中，div塊是有顏色值的，且是100%的透明度，現在點擊一下「透明」按鈕，如下圖所示：
圖7
在圖6和圖7中作對比，我們發現，在圖7中，透明度設置了40%，到了此處就不動了，一直按0.4的透明度顯示這個div元素。