jQuery中的經典動畫

2022-03-14 12:22:25 字數 2429 閱讀 5685

show()方法和hide()方法是jquery中的基本動畫方法,hide()方法等於將css()方法設定display屬性為none.如何讓元素動起來呢,我們可以在show和hide裡加入slow,fast,normal或者具體時間

1 $("

element

").show("

slow

");//

注意加引號哦~

2 $("

element

").hide(1000);

$("

#panel h5.head

").toggle(function(),function());

和show()方法不同,fadein()方法和fadeout()方法只改變元素的透明度。slideup()方法和slidedown()方法只會改變元素的高度,如果乙個元素的屬性值設定為none,當呼叫slidedown()方法時,這個元素將由上至下延伸顯示。

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

或具體的數字()單位預設是毫秒。

自定義動畫方法animate()

animate(params,speed,callback);

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

下面介紹一下幾種常見的動畫:

1累加,累減動畫

1

$(function(),300);4

});5 });

2多重動畫

2.1同時執行多個動畫

1

$(function(),3000)4

});5 });

2.2按順序執行多個動畫

1 $(this).animate(,3000

)2 .animate(,3000);

3綜合動畫

1

$(function(),3000

)5 .animate(,3000

)6 .fadeout("

slow");

7});

8 });

4**函式

在上例中,如果想在最後一步中切換元素的css樣式,而不是隱藏元素,能不能直接在後面加入css()方法呢,答案是不可以的,css()方法並不會加入到動畫佇列中去,而是立即執行。callback**函式適用於jquery所有的動畫效果方法,只要把css()方法寫在最後乙個動畫的**函式裡即可。

1

$(function(), 3000

)5 .animate(, 3000

,function());89

});10 });

5停止元素的動畫

如果要在某處停止動畫,需要使用stop()方法,語法結構:stop([clearqueue],[gotoend]);這兩個引數都是可選引數,都是布林值,第乙個代表是否要清空未執行完的動畫佇列,第二個代表是否直接將正在執行的動畫跳轉到末狀態。如果把第乙個引數(clearqueue)設定為true,此時程式會把當前元素接下來尚未執行完的動畫佇列都清空,在遇到組合動畫時的救急之術。stop(true,true)表示停止當前動畫並直接到達到未執行動畫佇列的末狀態。stop(false,true)可以讓當前動畫直接到達末狀態。值得注意的是jquery只能設定正在執行的動畫的最終狀態,而沒有提供直接到達未執行動畫佇列最終狀態的方法。

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

1

if(!$(element).is("

:animated

"))

7延遲動畫

1 $(this).animate(,3000

)2 .delay(1000

)3 .animate(,3000

)4 delay(2000

)5 .fadeout("

slow

");

8其他動畫方法

8.1 toggle(speed,[callback])

1 $("

#panel h5.head

").toggle(function(),function());

8.2slidetoggle()通過改變高度來切換匹配元素的可見性。

8.3 fadeto()方法可以把元素的不透明度以漸近方式調整到指定的值。

8.4fadetoggle()方法通過不透明度變化來切換元素的可見性。

把簡單的事情做好就是不簡單,這些看似簡單的動畫好好運用一定有變幻莫測的奇蹟~

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