jquery常用動畫效果及使用

2022-09-06 08:06:10 字數 1434 閱讀 8115

動畫效果:

1.顯示/隱藏動畫效果

動態的改變當前元素的寬,高和不透明度

show([duration],[fn]);		//顯示當前元素

hide([duration],[fn]); //隱藏當前元素

toggle([duration],[fn]); //切換當前元素的可見狀態

duration:動畫效果執行的時間,預設為0,立即顯示元素

關鍵字:"slow","normal","fast" - 0.6,0.4,0.2秒

數字:600,400,200,... 單位是毫秒

fn:在動畫完成時執行的函式

2.淡入/淡出動畫效果

動態的改變當前元素的透明度(其他不變)

fadein([duration],[fn])		//顯示當前元素	- 淡入效果

fadeout([duration],[fn]) //隱藏當前元素 - 淡出效果

fadetoggle([duration],[fn]) //切換當前元素的可見狀態 -- duration預設為normal,0.4秒

fadeto([duration],opacity,[fn]) //在指定時間內,從當前透明度淡到指定透明度

opacity:指定不透明值,取值範圍是0-1,0代表完全透明,1代表完全不透明

3.滑入/滑出動畫效果

動態的改變當前元素的高度(其他不變)

slidedown([duration],[fn])		//顯示當前元素	- 由上到下滑入

slideup([duration],[fn]) //隱藏當前元素 - 由下到上滑出

slidetoggle([duration],[fn]) //切換當前元素的可見狀態

4.自定義動畫

動態的改變當前元素的各種css屬性

animate(properties,[duration],[fn])

properties:使用乙個"name:value"形式的物件,,用來設定改變的css屬性

animate():只能改變可以取數字值的css屬性,如大小,邊框,定位,字型,背景,...

移動元素是需要顯示元素的position屬性為absolute/relative.

"佇列"動畫:元素執行多個動畫效果,即元素執行多個animate()方法,按照方法的順序進行動畫效果的展示.

5.動畫停止

stop()結束當前動畫,立即進入到下乙個動畫

stop([clearqueue],[gotoend])

clearqueue:是否清空未執行完的動畫佇列.設定true,可以立即結束動畫

gotoend:是否立即完成正在執行的動畫.設定true,並且重設show和hide的原始樣式,呼叫**函式等

jQuery的常用動畫效果

1.jquery的級聯選單 在做下拉列表時,乙個下拉項的改變常常會引起其他下拉列表中的選項發生變化,例如地域選擇 的省市縣聯動改變 a 首先在標籤中引入jquery,注意路徑問題 b 搭建基本的web標籤介面請選擇省 陝西省河南省 江蘇省c 編寫jquery 實現級聯功能 2.鍵盤事件 通過特定的鍵...

jquery 12 jquery常用動畫效果有哪些

在方法裡面帶上時間引數即可,所有的都是這樣 25 this next fadeout 1000 5 this next slideup 1000 2 h1 click function else 9 用css 拿出屬性值,然後判斷,比如判斷顯隱就可以用下面方法 22 d this next css ...

jquery 12 jquery常用動畫效果有哪些

在方法裡面帶上時間引數即可,所有的都是這樣 25 this next fadeout 1000 5 this next slideup 1000 2 h1 click function else 9 用css 拿出屬性值,然後判斷,比如判斷顯隱就可以用下面方法 22 d this next css ...