8-2. jQuery特效:淡入淡出、定製特效

3)淡入淡出特效

1. fadeOut 方法

通過淡出的方式隱藏匹配元素

fadeOut( [duration] [, easing] [, complete] )

 

2. fadeIn 方法

通過淡入的方式顯示匹配元素

fadeIn( [duration] [, easing] [, complete] )

 

3. fadeTo 方法

調整匹配元素的透明度

fadeTo( duration, opacity [, easing] [, complete] ) 

注:opacity的值在0~1之間,表示透明度

 

4. fadeToggle 方法

通過匹配元素的不透明度動畫,來顯示或隱藏它們

fadeToggle( [duration] [, easing] [, complete] )

 

4)定製特效

animate方法

根據一組CSS屬性,執行自定義動畫

ainimate( properties [, duration] [, easing] [, complete] )

參數說明:

properties: 一個CSS屬性和值的對象,動畫將根據這組對象移動值也可以是:+= 或 -=開始的值,那麼目標值就是以這個屬性

                    的當前值加上或者減去給定的數字來計算的比如:left: '+=50'

注意:   

                  所有用於動畫的屬性必須是數字的(例如,width, height或者left可以執行動畫),除非另有說明除了樣式屬性,

                  一些非樣式的屬性,如scrollTop 和 scrollLeft,以及自定義屬性,也可應用於動畫!要設置整個頁面的滾動條不可

                 以將document或者window傳入$函數,必須將html,body一起傳入纔可得到各個瀏覽器的兼容即:$('html,body'),

                  這就是規定,這麼用就ok了!CSS簡寫屬性(例如font,  border等)沒有得到充分的支持,即設置時不要用簡寫方式!

                  並且, 對於這些屬性預設值最好不要是"auto" 。


duration: 一個字符串或者數字決定動畫將運行多久(默認: 400)

                 默認值: "normal", 三種預定速度的字符串("slow", "normal", 或 "fast")或表示動畫時長的毫秒數值(如:1000)

easing:   一個字符串,表示過渡使用哪種緩動函數(默認: swing),jQuery自身提供"linear" 和 "swing"

                  complete:在動畫完成時執行的函數,函數內部的this指向執行動畫的DOM元素

 

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