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

1、show()顯示效果

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

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

2、hide()隱藏效果

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

hide(speed,easing,callback)  Number/String

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

其中params要用中括號(hào)括起來(lái)，可以使用的css樣式參數(shù)。注意要采用駱駝法則，如font-size要寫(xiě)成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í)行動(dòng)畫(huà)

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

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

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

delay(duration,[queueName])  設(shè)置一個(gè)延遲值來(lái)執(zhí)行動(dòng)畫(huà)  Integer,String

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

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

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

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

最新評(píng)論