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

1、show()顯示效果

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

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

2、hide()隱藏效果

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

hide(speed,easing,callback)  Number/String

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

其中params要用中括號括起來，可以使用的css樣式參數。注意要采用駱駝法則，如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() 停止正在執行動畫

stop([clearQueue],[gotoEnd]);  兩個參數均為布爾值，第一個表示，是否停止動畫執行、第二個表示，如果停止，是否立即變為執行完成的狀態，如果設置為否，則停留在執行一半的狀態。

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

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

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

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

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

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

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