jQuery中的動畫大致分為三類：
- 基本動畫方法hide()和show()到fadeIn()和fadeOut(),然后到slideUp()和slideDown()方法拄丰。
- 自定義動畫animate()
- 交互動畫方法toggle()虚茶、slideToggle()、fadeTo()和fadeToggle()恬砂。
1、show()和hide()方法
- hide()方法蓬痒，會將該元素的display樣式改為“none”泻骤。
- hide()方法在將”內容“的display屬性值設置為"none"之前，會記住原先得display屬性值("block"或"inline")梧奢。
- show()和hide()方法可以傳入一個速度參數(shù)狱掂，這個參數(shù)可以是關鍵字”slow“，”fast“亲轨，”normal“趋惨，還可以具體的一個單位為毫秒的數(shù)字。
- show()和hide()方法會同時改變”內容“的高度瓶埋、寬度和不透明度希柿。
2、fadeIn()和fadeOut()方法
- 與show()和hide()方法不同的地方是养筒，只改變元素的不透明度曾撤。
3、slideUp()和slideDown()方法
- 與前面兩類不同的是晕粪，只改變元素的高度挤悉。
4、自定義動畫方式animate()
animate(params,speed,callback)
(1)params：一個包含樣式屬性及值得映射巫湘，比如{property1:"value"}装悲。
(2)speed：速度參數(shù)昏鹃，可選。
(3)callback：在動畫完成時執(zhí)行的函數(shù)诀诊，可選洞渤。
- 為了讓元素動起來，就要更改元素的"top","left","bottom"和"right"樣式屬性属瓣，必須先把元素的position樣式設置為"relative"或"absolute"载迄。
- 可以實現(xiàn)累加、累減動畫效果
$(this).animate({left:"+=200px"},300);
- 動畫的回調函數(shù)適用于jQuery中所有的動畫效果方法抡蛙，可以對非動畫方法护昧，例如css()等，實現(xiàn)排隊粗截，不會立即執(zhí)行惋耙。
5、停止動畫和判斷是否處于動畫狀態(tài)
stop([clearQueue],[gotoEnd])
- 參數(shù)clearQueue和gotoEnd都是可選參數(shù)熊昌，為Boolean值绽榛。clearQueue代表是否清空未執(zhí)行的動畫隊列，gotoEnd代表是否直接將正在執(zhí)行的動畫跳轉到末狀態(tài)浴捆。
- 如果直接使用stop()方法蒜田，則會立即停止當前正在進行的動畫，如果接下來還有動畫等待繼續(xù)進行选泻，則以當前狀態(tài)開始接下來的動畫。
- 經(jīng)常會遇到一種情況美莫，在為一個元素綁定hover事件之后页眯，用戶把光標移入元素時會觸發(fā)動畫效果，當這個動畫效果還沒結束時厢呵，用戶就將光標移出這個元素了窝撵，那么光標移出的動畫效果將會放進隊列之中，等待光標移入的動畫結束后再執(zhí)行襟铭。如果光標移入移出得過快就會導致動畫效果與光標的動作不一致碌奉。要解決這個問題，只需要在光標的移入寒砖、移出動畫之前加入stop()方法赐劣、就能解決這個問題。
$(function(){
$(".panel").hover(function(){
$(this).stop().animate({height:"150px",width:"300px"},200);
},function(){
$(this).stop().animate({height:"22px",width:"60px"},300);
})
});
此時只用一個不帶參數(shù)的stop()方法就顯得力不從心了哩都。因為stop()方法只會停止正在進行的動畫魁兼，如果動畫有幾個階段，還是會出現(xiàn)上述的不一致問題漠嵌，所以可以把第一個參數(shù)(clearQueue)設置為true咐汞，此時程序會把當前元素接下來尚未執(zhí)行完的動畫隊列都清空盖呼。
- 判斷元素是否處于動畫狀態(tài)可以使用以下的方法：
if($(element).is(":animated")){}
- 要想延遲動畫的執(zhí)行可以使用delay()方法，傳入一個時間參數(shù)化撕，值得注意的是帆竹，該方法只能用于位于隊列中的動畫方法贯莺。
6、交互式的動畫方法
- toggle()方法可以切換元素的可見狀態(tài)。
- slideToggle()方法通過高度變化來切換匹配元素的可見性脐湾。
- fadeTo()方法可以把元素的不透明度以漸進方式調整到指定的值。
- fadeToggle()方法通過不透明度改變來切換匹配元素的可見性您单。
