淡入淡出效果 (jQuery)

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到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 參數是該函數完成後所執行的函數名稱。