淡入淡出效果 jQuery

讓元素在頁面不可見，常用的辦法就是通過設定樣式的display:none。除此之外還可以一些類似的辦法可以達到這個目的。這裡要提乙個透明度的方法，設定元素透明度為0，可以讓元素不可見，透明度的引數是0~1之間的值，通過改變這個值可以讓元素有乙個透明度的效果。常見的淡入淡出動畫正是這樣的原理。

fadeout()函式用於隱藏所有匹配的元素，並帶有淡出的過渡動畫效果

所謂"淡出"隱藏的，元素是隱藏狀態不對作任何改變，元素是可見的，則將其隱藏。

.fadeout( [duration ], [ complete ] )

通過不透明度的變化來實現所有匹配元素的淡出效果，並在動畫完成後可選地觸發乙個**函式。這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。

字串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字串，或者這個duration引數被省略，那麼預設使用400毫秒的延時

fadeout是淡出效果，相反的還有淡入效果fadein,方法使用上兩者都是一致的，只是結果相反

.fadein( [duration ], [ complete ] )

fadein()函式用於顯示所有匹配的元素，並帶有淡入的過渡動畫效果。

注意：

fadetoggle()函式用於切換所有匹配的元素，並帶有淡入/淡出的過渡動畫效果。之前也學過toggle、slidetoggle 也是類似的處理方式

fadetoggle切換fadeout與fadein效果，所謂"切換"，即如果元素當前是可見的，則將其隱藏(淡出)；如果元素當前是隱藏的，則使其顯示(淡入)。

常用語法：.fadetoggle( [duration ] ,[ complete ] )

可選的duration引數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 引數是 fadetoggle完成後所執行的函式名稱。

fadetoggle() 方法可以在 fadein() 與 fadeout() 方法之間進行切換。如果元素已淡出，則 fadetoggle() 會向元素新增淡入效果。如果元素已淡入，則 fadetoggle() 會向元素新增淡出效果。

淡入淡出fadein與fadeout都是修改元素樣式的opacity屬性，但是他們都有個共同的特點，變化的區間要麼是0，要麼是1

fadein：淡入效果，內容顯示，opacity是0到1

fadeout：淡出效果，內容隱藏，opacity是1到0

如果要讓元素保持動畫效果，執行opacity = 0.5的效果時，要如何處理？

如果不考慮css3，我們用js實現的話，基本就是通過定時器，在設定的時間內一點點的修改opacity的值，最終為0.5，原理雖說簡單，但是總不如一鍵設定這麼舒服，jquery提供了fadeto方法，可以讓改變透明度一步到位

語法

.fadeto( duration, opacity ,callback)

必需的 duration引數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。fadeto() 方法中必需的 opacity 引數將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）。可選的 callback 引數是該函式完成後所執行的函式名稱。