Jquery動畫函數分為三類
基本動畫函數
基本動畫函數包括show（顯示）、hide（隱藏）、toggle（切換）這三個函數。
例子所需html
<input type="button" value="點擊" id="btn" /><div id="ts">這是一個提示</div>
show()
主要用來控制元素的顯示，如果元素默認處于顯示狀態則不會發生任何改變。
$("#ts").show(); //如果這個元素是隱藏的 則將其顯示
該方法還提供了一個重載，可以實現動畫效果慢慢顯示，參數為毫秒。
$("#ts").show(400); //參數毫秒
可以在發生變化后執行回調函數
$("#ts").show(400,function(){ alert("執行完畢"); //其他代碼});hide()
該方法對應show方法，意思是隱藏的意思。將頁面上的元素進行隱藏，同樣也有重載和回調函數。
$("#ts").hide(); //將元素立即隱藏$("#ts").hide(400); //將元素緩慢隱藏 參數毫秒$("#ts").hide(400,function(){ alert("執行完畢");});toggle()
對于顯示和隱藏提供了一個切換方法，如果隱藏則開啟，否則則隱藏。
$("#btn").click(function(){ $("#ts").toggle(400,function(){ console.log("點擊了一次"); });});滑動動畫函數
滑動動畫函數包括slideUp(滑動隱藏)、slideDown(滑動顯示)、slideToggle（滑動開關）
slideDown()
就是滑動版的show方法，參數一樣。
$("#ts").slideDown(); //從上到下 滑動顯示 滑動showslideUp()
滑動版的hide方法。
$("#btn").click(function(){ $("#ts").slideUp(400);});slideToggle()
滑動版toggle方法。
$("#btn").click(function(){ $("#ts").slideToggle(400,function(){ console.log("點擊了一次"); });});淡入淡出動畫函數
淡入淡出函數包括：fadeOut()、fadeIn()、fadeToggle()、fadeTo()，效果為透明度慢慢變底或變高，使用方法同上。而fadeTo方法是漸變到給定的透明值。
fadeTo()
$("#btn").click(function(){ $("#ts").fadeTo(400,0.3);//漸變到給定的透明值（0~1）});自定義動畫函數
animate()
該方法用于將某個元素慢慢變為某個形式。
$("#ts").CSS("border","1px dashed #000"). css("width","100px"). animate({ //操作css樣式 逐漸變為該樣式 樣式名稱Camel 命名法paddingLeft 不是padding-left width:$(window).width() - 100, height:$(window).height() - 100 },1000);stop()
stop()方法用于停止某個動畫
$("#btn").click(function(){ $("#ts").stop(); //立即停止動畫 $(":animated").stop(); //停止所有動畫});一個鼠標移入移出例子
$("#btn").mouSEOver(function(){ $("#ts").animate({marginLeft:"1000px"},1000);}).mouseout(function(){ $("#ts").animate({marginLeft:"0px"},1000);});另外有一個全局函數可以禁用所有頁面的動畫。
$.fx.off=true; //全局屬性 禁用所有動畫 false為啟動$("ts").hide();
將該屬性設置為true后，跟在后面的所有動畫都不會執行。
新聞熱點
疑難解答
