淡入淡出效果 (jQuery)

標籤：常見   fas   span   strong   使用   fadeout   play   class   回呼函數   

1jQuery中淡齣動畫fadeOut

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

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

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

.fadeOut( [duration ], [ complete ] )

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

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

2jQuery中淡入動畫fadeIn

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

.fadeIn( [duration ], [ complete ] )

• duration：指定過渡動畫運行多長時間(毫秒數)，預設值為400。該參數也可以為字串"fast"(=200)或"slow"(=600)。
• 元素顯示完畢後需要執行的函數。函數內的this指向當前DOM元素。

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

注意：

• 淡入的動畫原理：操作元素的不透明度從0%逐漸增加到100%
• 如果元素本身是可見的，不對其作任何改變。如果元素是隱藏的，則使其可見

3jQuery中淡入淡出切換fadeToggle

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

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

常用文法：.fadeToggle( [duration ] ,[ complete ] )

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

fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

4jQuery中淡入效果fadeTo

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

fadeIn：淡入效果，內容顯示，opacity是0到1fadeOut：淡出效果，內容隱藏，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 參數是該函數完成後所執行的函數名稱。

淡入淡出效果 (jQuery)