jQuery 動畫效果

2021-09-06 05:24:02 字數 1698 閱讀 5625

1.基本效果

(1)隱藏

hide()

hide(speed [,callback])

(2)顯示

show()

show(speed [,callback])

(3)交替顯示隱藏

toggle()  //單擊一次隱藏,再單擊一次顯示,迴圈。。。。

toggle(switch)  //switch 為true則顯示,false則隱藏

toogle(speed [,callback])

2.滑動效果

(1)向上收縮

slideup(speed [,callback])

(2)向下展開

slidedown(speed [,callback])

(3)交替伸縮樣式

slidetoggle(speed [,callback])  //一次收縮一次展開,迴圈。。。

3.淡入淡出效果

(1)淡入

fadein(speed [,callback])

(2)淡出

faseout(speed [,callback])

(3)自定義不透明度

fadeto(speed, opacity [,callback]) //opacity是要調整到的不透明度值

4.自定義動畫效果

(1)自定義動畫

animate(styles, speed, easing [,callback])

styles:用於規定產生動畫效果的css樣式,注意所有指定的css樣式dom名稱來設定,而不是css名稱,如用"fontsize"來代替"font-size".

esaing:用於指定在不同的動畫點中設定動畫速度的easing函式,內建的easing函式包括swing 和linear

animate(styles, options)

該函式是上面函式的過載。第乙個引數與上乙個一樣。

options 是可選項,用於規定動畫的額外選項,包括 speed, easing, callback, step(指定動畫的每一步完成之後要執行的函式), queue(指定動畫是否進入效果佇列)

stop(stopall, gotoend)

stopall 是可選的,如果為 true 則立即結束所有動畫。

gotoend 使當前正在執行的動畫立即完成,並重新設定show 和 hide 的原始樣式。

(2)jquery 動畫佇列

queue(name, callback)

將動畫函式新增到佇列中,name 表示佇列函式,callback 表示動畫完成後執行的函式

queue(name, queue)

將佇列用乙個新的佇列(函式陣列)來代替。

dequeue([name])

將函式陣列中的第乙個函式取出並執行。

delay(duration [,queuename])

duration 表示延時時間

clearqueue(name)

清除佇列中所有未執行的函式。

jquery 動畫效果

首先,在做jquery 動畫效果之前,必須先知道jquery動畫效果的實現順序。jquery中,會把所有的動畫效果 如hide,show等 放入乙個佇列中 預設為 fx 然後依照先進先出的原則執行佇列中的動畫效果。其他的非動畫效果,都不會放入佇列中。並且jquery 會優先執行這些非動畫效果,然後再...

JQuery動畫效果

show 顯示隱藏的匹配元素 hide 隱藏顯示的元素 slideup 滑走 元素不能復原 slidetoggle 滑走 元素可以復原 感覺今天寫的並沒有什麼卵用 因為這是動的啊!但是看在iphone更新的情況下 就寫一下吧 fadein 通過不透明度的變化來實現所有匹配元素的淡入效果注意 不會 影...

jQuery 效果 動畫

jquery animate 方法允許您建立自定義的動畫。開始動畫 jquery jquery animate 方法用於建立自定義動畫。selector animate speed,callback 必需的 params 引數定義形成動畫的 css 屬性。可選的 speed 引數規定效果的時長。它可...