JQuery動畫

     .fadeOut()淡出動畫、.fadeIn()淡入動畫、 .fadeToggle()淡入淡出切換和淡入效果.fadeTo()

1   .fadeOut()淡出動畫,淡出效果,內容隱藏,opacity是1到0

2   常見讓元素在頁面中不可見的方法有

  通過設置樣式的display:none

  透明度的方法,設置元素透明度爲0,可以讓元素不可見,透明度的參數是0~1之間的值,通過改變這個值可以讓元素有一個透明度的效果

3   fadeOut()函數用於隱藏所有匹配的元素,並帶有淡出的過渡動畫效果
4   所謂"淡出"隱藏的,元素是隱藏狀態不對作任何改變,元素是可見的,則將其隱藏
5  通過不透明度的變化來實現所有匹配元素的淡出效果,並在動畫完成後可選地觸發一個回調函數,這個動畫只調整元素的不透明度,也就是說所有匹配的元素的高度和寬度不會發生變化
6  字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串,或者這個duration參數被省略,那麼默認使用400毫秒的延時

7   .fadeIn()淡入動畫,淡入效果,內容顯示,opacity是0到1

8  duration指定過渡動畫運行多長時間(毫秒數),默認值爲400,該參數也可以爲字符串"fast"(=200)或"slow"(=600)

9  元素顯示完畢後需要執行的函數,函數內的this指向當前DOM元素
10   .fadeIn()函數用於顯示所有匹配的元素,並帶有淡入的過渡動畫效果
 
11  
淡入的動畫原理,操作元素的不透明度從0%逐漸增加到100%
12   如果元素本身是可見的,不對其作任何改變。如果元素是隱藏的,則使其可見
13   .fadeToggle()淡入淡出切換,用於切換所有匹配的元素,並帶有淡入/淡出的過渡動畫效果
14   fadeToggle切換fadeOut與fadeIn效果,所謂"切換",即如果元素當前是可見的,則將其隱藏(淡出),如果元素當前是隱藏的,則使其顯示(淡入),隱藏的元素不會被完全顯示(不再影響頁面的佈局)
15   .fadeToggle()可以在.fadeIn()和.fadeOut()之間進行切換,如果元素已經淡出,則.fadeToggle()會向元素添加淡入效果,如果元素已經淡入,則.fadeToggle()會向元素添加淡出效果
16   語法.fadeTo( duration, opacity ,callback)必需的 duration參數規定效果的時長,它可以取以下值:"slow"、"fast" 或毫秒,fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置爲給定的不透明度(值介於 0 與 1 之間),可選的 callback 參數是該函數完成後所執行的函數名稱

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章