快捷導(dǎo)航

jQuery動畫效果相關(guān)方法實例分析

更新時間：2015年12月31日 10:46:43 作者：逆心

這篇文章主要介紹了jQuery動畫效果相關(guān)方法,結(jié)合實例形式較為詳細(xì)的分析了jQuery實現(xiàn)動畫效果所用到的常見方法與相關(guān)注意事項,需要的朋友可以參考下

本文實例講述了jQuery動畫效果相關(guān)方法。分享給大家供大家參考，具體如下：

1、show()顯示效果

語法：show(speed,callback) Number/String,Function speend為動畫執(zhí)行時間，單位為毫秒。也可以為slow","normal","fast" callback可選,為當(dāng)動畫完成時執(zhí)行的函數(shù)。

show(speed,[easing],callback) Number/String easing默認(rèn)是swing,可選linear;

復(fù)制代碼代碼如下:

$("#div1").show(3000,function(){ alert("動畫顯示完成!"); });

2、hide()隱藏效果

語法:hide(speed,callback) Number/String,Function

hide(speed,easing,callback) Number/String

復(fù)制代碼代碼如下:

$("#div1").hide(3000,function(){ alert("動畫隱藏完成") });

3、toggle()隱藏顯示自動切換，當(dāng)目前為顯示則隱藏，當(dāng)目前為隱藏則顯示

語法：toggle(speed,callback) Number/String,Function

toggle(speed,callback) Number/String,String,Function

復(fù)制代碼代碼如下:

$("#div1").toggle(3000,function(){ alert("動畫效果切換完成") });

4、slideDown()向下顯示，slow()是水平與垂直方向同時展開，而slideDown是僅僅在垂直方向向下展開

語法:slideDown(speed,callback) Number/String,Function

slideDown(speed,[easing],callback) Number/String,Function

復(fù)制代碼代碼如下:

$("#div1").slideDown(3000,function(){ alert("向下展開顯示成功!"); });

5、slideUp()向上隱藏, hide()是水平與垂直兩個方向的，而slideUp()僅僅是垂直方向向上收起隱藏

語法:slideUp(speed,callback) Number/String,Function

slideUp(speed,[easing],callback) Number/String,String,Function

復(fù)制代碼代碼如下:

$("#div1").slideUp(3000,function(){ alert("向上收起隱藏成功!"); })

6、slideToggle垂直方向上切換,toggle是水平與垂直兩個方向上的，而slideToggle是僅僅垂直方向的。

語法:slideToggle(speed,callback) Number/String,Function

slideToggle(speed,[easing],callback) Number/String,String,Function

復(fù)制代碼代碼如下:

$("#div1").slideToggle(3000,function(){ alert("水平方向上切換成功"); });

7、fadeIn() 以改變透明度來顯示

語法：fadeIn(speed,callback) Number/String,Function

fadeIn(speed,[easing],callback) Number/String,Function

復(fù)制代碼代碼如下:

$("#div1").FadeIn(3000,function(){ alert("淡入顯示成功!"); });

8、fadeOut() 以改變透明度來隱藏

語法：fadeOut(speed,callback) Number/String,Function

fadeOut(speed,[easing],callcack) Number/String,String,Function

復(fù)制代碼代碼如下:

$("#div1").fadeOut(3000,function(){ alert("淡出隱藏成功!"); });

9、fadeToggle() 以改變透明度來切換顯示隱藏狀態(tài)

語法: fadeToggle(speed,callback) Number/String,Function

fadeToggle(speed,[easing],callback) Number/String,Function

復(fù)制代碼代碼如下:

$("#div1").fadeToggle(3000,function(){ alert("淡入淡出切換成功!"); });

10、fadeTo() 由指定的時間將透明度改變到指定的透明度

語法：fadeTo(speed,callback) Number/String,Function

fadeTo([speed],opacity,[easing],[fn]) Number/String,Float,String,Function

復(fù)制代碼代碼如下:

$("#div1").fadeTo(3000,0.22,function(){ alert("透明度改變成功!"); });

11、animate() 自定義動畫，一般來說數(shù)字變動都可以用于動畫。

語法：animate(params,speed,easing,callback); 樣式參數(shù)，時間，可選擇，函數(shù)

復(fù)制代碼代碼如下:

$("#div1").animate({ width:300px,height,300px },3000);

其中params要用中括號括起來，可以使用的css樣式參數(shù)。注意要采用駱駝法則，如font-size要寫成fontSize。顏色漸變不支持。

backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent

12、stop() 停止正在執(zhí)行動畫

stop([clearQueue],[gotoEnd]); 兩個參數(shù)均為布爾值，第一個表示，是否停止動畫執(zhí)行、第二個表示，如果停止，是否立即變?yōu)閳?zhí)行完成的狀態(tài)，如果設(shè)置為否，則停留在執(zhí)行一半的狀態(tài)。

$("#div1").hide(5000) //此動畫正在執(zhí)行
$("#div1").stop();  //上一行代碼指定的動畫停止在一半狀態(tài)
$("#div1").stop(true,true); //停止當(dāng)前動畫，同時動畫切換到完成執(zhí)行狀態(tài)。

13、delay() 延遲執(zhí)行動畫當(dāng)一個動畫stop()了之后還能夠用delay()來延遲執(zhí)行。從停止位置繼續(xù)執(zhí)行。當(dāng)然用原來的方法繼續(xù)執(zhí)行也不可，不過沒有延時效果。

delay(duration,[queueName]) 設(shè)置一個延遲值來執(zhí)行動畫 Integer,String

復(fù)制代碼代碼如下:

$("#div1").delay(3000).hide(3000);  //表示在3000毫秒后執(zhí)行hide(3000);

14、jQuery.fx.off //該屬性只是是否關(guān)閉當(dāng)前頁面上的動畫,關(guān)閉動畫之后，沒有動畫效果，所有設(shè)置了執(zhí)行時間的動畫會瞬間完成。注意此屬性出現(xiàn)的位置。出現(xiàn)的位置不同影響的范圍也不同。

$(function(){
  jQuery.fx.off = true; //屬性在事件外面，對頁面加載后執(zhí)行的所有動畫有效
  $("#div1").click(function(){ //屬性如果寫在這里，僅僅對當(dāng)前點擊事件無效，不影響其他事件的動畫
   $("#div1").hide(3000); //注意由于jQuery.fx.off設(shè)置為了true,因此3000毫秒失效，相當(dāng)于hide();
   });
})

15、jQuery.fx.interval //該屬性設(shè)置動畫的幀速，單位是毫秒，如果設(shè)置的時間越小，就越平滑。，屬性出現(xiàn)的位置同樣有影響范圍

$(function(){
  jQuery.fx.interval = 1000;
  $("#div1").click(function(){
   $("#div1").hide(3000); //jQuery.fx.interval設(shè)置為1000，也就是1秒鐘，改變一次效果。
   });
})

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: