jQuery之動畫效果大全

下面介紹了幾種動畫效果的方法，具體如下：

1、show()顯示效果

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

 show(speed,[easing],callback)　　Number/String　　easing預設為swing,可選linear;

$("#div1").show(3000,function(){ alert("动画显示完成!"); });　　

   

　　　　

2、hide()隱藏效果

語法eed,easing,callback)　　Number/String　　　

$("#div1").hide(3000,function(){ alert("动画隐藏完成") });

   

 3、toggle()隱藏顯示自動切換，目前為顯示器則隱藏，目前為隱藏則顯示

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

　　　　Npeed,Function🀜, ,String,Function　　  

$("#div1").toggle(3000,function(){ alert("动画效果切换完成") });

   

4、slideDown()向下顯示，slow()是水平與垂直方向同時展開，而slideDownslall:slidds )　　Number/String,Function

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

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

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

　　  slideUp(speed,[easing],callback)　　  slideUp(spunceed,[easing],callback)　行/   

6、slideToggle垂直方向上切換,toggle是水平與垂直兩個方向上的，而slideToggle是僅僅垂直方向的。 ,[easing],callback)　　Number/String,String,Function　　　

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

   

7、fadeIn() 以改變透明度為

7、fadeIn() 以改變透明度為🀀　㟜　,Ft.

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

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

   

8、fadeString() 改變透明度

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

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

   

9、fadeToggle() 以改變透明度來切換隱藏狀態

9、fadeToggle() 以改變透明度來切換隱藏狀態

.

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

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

   

ade

allback)　　　　Number /String,Function

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

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

   

數位變動都可以用於動畫。

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

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

  

括起來

.注意要採用駱駝法則，如font-size要寫成fontSize。顏色漸層不支援。

backgroundPosition

borderWidth

borderBottomWidth

borderLeftWidth

borderRightWidth

borderTopWidth

borderSpacingmargin

borderTopWidth

borderSpacingmargin

marBothio th

padding

paddingBottom

paddingLeft

paddingRight

paddingTop

height

width

maxHeight

maxWidth

minHeight

maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent

12、stop()End正在執行動畫
textIndent

12、stop()Endwhocaryl); ，第一個表示，是否停止動畫執行、第二個表示，如果停止，是否立即變為執行完成的狀態，如果設定為否，則停留在執行一半的狀態。　

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

   



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

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

   



 14、jQuery.fx.off//該屬性只是是否關閉當前頁面上的動畫,關閉動畫之後，沒有動畫效果，所有設定了執行時間的動畫會瞬間完成。注意此屬性出現的位置。出現的位置不同影響的範圍也不同。　　

$("#div1").hide(5000)　　//此动画正在执行
 
　　$("#div1").stop();　　　　//上一行代码指定的动画停止在一半状态
 
　　$("#div1").stop(true,true);　　//停止当前动画，同时动画切换到完成执行状态。

   

15、jQuery.fx.interval　　//该属性设置动画的帧速，单位是毫秒，如果设置的时间越小，就越平滑。，属性出现的位置同样有影响范围　

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