jQuery 中的動畫

2021-05-22 23:10:43 字數 1108 閱讀 3288

用jquery 做動畫效果要求在標準模式下,否則可能會引起動畫抖動。標準模式即要求檔案頭部包含如下的dtd定義:

jquery 中的任何動畫效果,都可以指定3種速度引數,即"slow","normal","fast" (時間長度分別為0.6s,0.4s,0.2s)

1.fadein() 與fadeout()方法  只改變元素的不透明度 !fadeout() 會在指定的一段時間內降低元素的不透明度,直到元素完全消失("display=none")。fadein() 方法則相反。

2.slideup() 與slidedown()方法  只會改變元素的高度 。當呼叫 slidedown() 時這個元素將由上至下延伸顯示。  slideup() 元素將由下到上縮短隱藏。     可以 通過slidetoggle() 來在兩者之間切換。

3.animate()功能最強大的乙個動畫效果方法!形式:animate(params , speed , callback )

params:乙個包含樣式屬性及值的對映,如

speed:速度引數,可選

callback:在動畫完成時執行的函式,可選。

4.stop()stop( [clearqueue] [, gotoend ])   引數clearqueue,gotoend為boolean 值(true 或 false)。   clearqueue 代表是否要清空未執行完的動畫佇列,gotoend 代表是否直接將正在執行的動畫跳轉到末狀態(只會跳到正在執行的動畫的末狀態)。

如果直接使用stop() 方法,則會立即當前正在進行的動畫,如果接下還有動畫等待繼續進行,則以當前狀態開始接下來的動畫。

判斷元素是否處於動畫狀態

在使用animate()方法時,要避免動畫積累而導致的動畫與使用者的行為不一致。解決方法是判斷元素是否正處於動畫狀態,如果元素不處於動畫狀態,才為元素新增新的動畫,否則不新增。

通常進行如下的判斷:

if( ! $(element).is(" :animated")){ 

// 如果當前沒有進行動畫,則新增新動畫

jQuery中的動畫

1.show 方法和hide 方法 兩個方法在沒有引數的情況下,作用是立即隱藏或顯示匹配的元素。slow則在600毫秒顯示,normal為400毫秒,fast為200毫秒。如果使元素1秒鐘顯示出來,則如下例 例 element show 1000 2.fadein 方法和fadeout 方法 兩個方...

jQuery中的動畫

jquery 動畫 jquery動畫分為三個部分,非自定義動畫,自定義動畫,和全域性動畫設定。一 非自定義動畫 1.顯示 隱藏 show hide toggle 兩種用法 1 不傳引數,代表直接顯示隱藏。2 向方法中傳遞乙個引數,這個引數為number型別,代表動畫的執行時間。會有顯示隱藏的動畫效果...

jQuery中的動畫

jquery中的動畫 一 show 方法和hide 方法 顯示和隱藏 語法 element show 速度引數 和 element hide 速度引數 速度引數 可以取 fast slow normal 數值,單位為毫秒 二 fidein 和fideout 改變元素的不透明度 fadein 方法 降...