jQuery中的動畫

2022-06-16 02:36:14 字數 1783 閱讀 2116

jquery -動畫

jquery動畫分為三個部分,非自定義動畫,自定義動畫,和全域性動畫設定。

一、非自定義動畫:

1.顯示、隱藏:

show( ) 、hide( )、toggle()

兩種用法:1)不傳引數,代表直接顯示隱藏。

2) 向方法中傳遞乙個引數,這個引數為number型別,代表動畫的執行時間。會有顯示隱藏的動畫效果。

示例:show(100)、hide(100)、toggle(100)

除此之外,jquery還為動畫方法提供了三種字串形式的引數:fast、slow、和空字串''

示例:show('fast')、hide('slow')、toggle('')

三種引數的執行時間分別為 :'fast' :200毫秒   ''(預設值):400毫秒   'slow':600毫秒

2.滑動:

slideup():向上滑動(隱藏)

slidedown():向下滑動(顯示)

slidetoggle():滑動(自動)

3.淡入淡出:

fadeout():淡出(隱藏)

fadein():淡入(顯示)

fadetoggle():顯示隱藏()自動

fadeto(),該方法接受兩個引數。

引數1是動畫執行的時間,引數2是期望達到的透明度。

二、自定義動畫

animate()方法

animate()方法有三個引數。分別是動畫目標(target),動畫執行時間,**函式。只有第乙個引數是必填引數。

animate()方法的使用:

將元素屬性變換為自定義動畫中的目標屬性,所有引數中的屬性一起改變。

animate()
設定的屬性,支援運算。

animate()
1)借助動畫的**函式(操作不同元素的時候,推薦使用**函式)

$('input').click(function(),function())

})})

2)將動畫效果分開寫

$('input').click(function())

$('div').animate()

})

3)連綴(操作同一元素的時候,推薦使用連綴)

$('input').click(function()).animate()

})

三、動畫及相關方法

1.stop()方法

這個方法是停止動畫的方法,他有兩個引數,都是布林值。

引數1:代表是否清除動畫佇列;引數2:代表是否直接執行到最後結果

2.delay()方法

延時執行,該方法有乙個引數,是延時執行的毫秒數。

3.動畫的遞迴

$('div').slidetoggle(2000,recursion)

function recursion()

附贈個高階寫法:

$('div').slidetoggle(2000,function())

常用在匿名函式中, 代表當前的函式。

jquery的動畫,以上。

jQuery 中的動畫

用jquery 做動畫效果要求在標準模式下,否則可能會引起動畫抖動。標準模式即要求檔案頭部包含如下的dtd定義 jquery 中的任何動畫效果,都可以指定3種速度引數,即 slow normal fast 時間長度分別為0.6s,0.4s,0.2s 1.fadein 與fadeout 方法 只改變元...

jQuery中的動畫

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

jQuery中的動畫

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