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判斷元素是否處於動畫狀態
1if(!$(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型別,代表動畫的執行時間。會有顯示隱藏的動畫效果...