jQuery基本動畫

jquery效果

一、基本效果 顯示與隱藏(通過控制寬高實現)

1.show() - 顯示

* 無參版本 - 不具有動畫效果

* show(speed,callback)有參版本 - 具有動畫效果

* speed - 設定動畫執行的時長,單位為毫秒

* 三個預定義值 - slow|normal|fast

* callback - 當動畫執行完畢後執行的函式

2.hide() - 隱藏

* 無參版本 - 不具有動畫效果

* hide(speed,callback)有參版本 - 具有動畫效果

3.toggle() - 隱藏-顯示切換

1 $("button:first").click(function

());
13});
14 $("button:last").click(function
());
26});
27//
toggle()
28function
move());32}
33 move();

二、滑動顯示效果

1.slidedown() - 向上滑動

* 可以不傳遞引數 - 底層具有預設時長

* 執行的效果依然具有動畫效果

* slidedown(speed,callback)

2.slideup() - 向下滑動

* slideup()

* slideup(speed,callback)

3.slidetoggle() - 向下-向上滑動切換

三、淡入淡出

1.fadein() - 淡入

* 可以不傳遞引數 - 底層具有預設時長

* 執行的效果依然具有動畫效果

* fadein(speed,callback)

2.fadeout() - 淡出

* 可以不傳遞引數 - 底層具有預設時長

* 執行的效果依然具有動畫效果

* fadeout(speed,callback)

3.fadeto() - 

1/*2

* fadeto(speed,opacity,callback)
3* * speed - 設定動畫執行的時長,單位為毫秒
4* * opacity - 設定當前元素的透明度(0-1)
5* * 0 - 透明
6* * 1 - 不透明7*/
8 $("div").fadeto(3000,0.5);

四、自定義動畫

1.animate(params,[duration],[easing],[callback])

2.animate(params,options)

示例：

1

// 併發與排隊效果
2// 併發效果 - 多個動畫效果同時執行
3// 排隊效果 - 多個動畫效果按照先後順序執行
4<
style
>
5div 
14style
>
15head
>
1617
<
body
>
18<
button
>執行動畫
button
>
19<
br><
br>
20<
div>
div>

1     $("button").click(function()6

* * duration - 設定動畫執行的時長,單位為毫秒
7* * 三種預定義值 - slow|normal|fast
8* * easing - 要使用的擦除效果的名稱(不使用)
9* * callback - 當動畫執行完畢後的函式
10*/
11//
併發效果 - 同時執行
12 $("div").animate(,3000);
1617
//排隊效果 - 按照先後順序執行
18 $("div").animate(,3000).animate(,3000).animate(,3000).animate(,3000);
29});
30//
231 $("button").click(function
()36
* * options - 選項
37* * 寫法 - 
38* * 選項
39* * duration - 設定動畫執行的時長
40* * easing - 要使用的擦除效果的名稱
41* * complete - 動畫執行完畢後的函式
42* * queue - 設定為false將使此動畫不進入動畫佇列 
43*/
44 $("div").animate(,).animate(,);
54 });

jQuery實現動畫效果基本操作

動畫效果 show 顯示 hide 隱藏 toggle 顯示和隱藏效果切換 都可以傳入引數，speed.fadeout 淡出 fadein 淡入 fadetoggle 淡入淡出切換 fadeto 2000,0.3 將顯示到透明度為 30 的程度 滑動顯示 slidedown slideup slid...

jquery動畫順序執行 JQuery動畫佇列詳解

jquery動畫存在乙個佇列，當在jquery物件上呼叫動畫方法時，如果物件正在執行某個動畫效果，那麼會把後面的動畫效果，放在乙個佇列裡面，然後按順序執行動畫佇列裡面的每乙個動畫。box.hide 1000,function box.show 1000,function box.fadeout sl...

jquery 動畫效果

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