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　　　　

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

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

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

.

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

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

borderBottomWidth

borderRightWidth

borderSpacingmargin

borderSpacingmargin

padding

paddingLeft

paddingTop

width

maxWidth

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("透明度改变成功!"); });

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

$("#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秒钟，改变一次效果。　
 
　　 });
 
 })