8 2 jQuery特效 淡入淡出 定製特效

2021-10-05 19:08:36 字數 1277 閱讀 9780

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元素

jQuery 淡入淡出

通過 jquery,您可以實現元素的淡入淡出效果。jquery 擁有下面四種 fade 方法 fadein fadeout fadetoggle fadeto 下面一一介紹 jquery fadein 用於淡入已隱藏的元素。語法 selector fadein speed,callback 可選的 ...

jQuery 淡入淡出

通過 jquery,您可以實現元素的淡入淡出效果。jquery 擁有下面四種 fade 方法 fadein fadeout fadetoggle fadeto jquery fadein 用於淡入已隱藏的元素。語法 selector fadein speed,callback 可選的 speed 引...

JQuery淡入淡出效果

jquery 擁有下面四種 fade 方法實現淡入淡出效果 selector fadein speed,callback 可選的 speed 引數規定效果的時長。它可以取以下值 slow fast 或毫秒。可選的 callback 引數是 fading 完成後所執行的函式名稱。selector fa...