Jquery的動畫效果能夠輕松的為網頁添加動畫效果，為網頁帶來了新的活力。
一、show()方法和hide()方法
show()方法和hide()方法是jquery中最基本的動畫方法。使用show()方法會將隱藏的元素顯示出來，使用hide()方法會將元素的屬性設置為display:none。使用hide()方法會記住原來的display屬性值，並把現在的display屬性設置為none;show()方法會元素的屬性設置為hide()前的屬性值。
示例：
$("btnShowHide").toggle(function(){$("p").hide();},function(){$("p").show();});
該示例點擊button按鈕時候交替切換p元素的狀態為隱藏和可見狀態，此時該方法同css("diplay","none/block/inline")效果一樣，但是hide()和show()方法可以帶有參數調整動作的執行速度。分別為"slow","normal","fast",對應時間為0.6秒、0.4秒和0.2秒。也可設置整數指定執行時間數字計數級別是毫秒。如：("p").show(1000);該示例使p元素中1秒內顯示完畢。也能添加回調事件函數。
二、fadeIn()方法和fadeOut()方法
fadeIn()方法和fadeOut()方法只改變元素的不透明度借以改變元素的顯示狀態。例：
$("btnfade").toggle(function(){$("p").hide();},function(){$("p").show();});
該示例通過改變元素的不透明度改變元素的是顯示狀態，同show()和hide()方法一樣也可以添加速度參數。也能添加回調事件函數。
三、slideUp()方法和slideDown()方法
slideUp()方法和slideDown()方法通過改變元素的的顯示狀態。例：
$("btnHeight").toggle(function(){$("p").hide();},function(){$("p").show();});
該示例通過改變元素的高度改變元素的是顯示狀態，同show()和hide()方法一樣也可以添加速度參數。也能添加回調事件函數。
四、自定義動畫
前面三種類型動畫方法滿足用戶的各種需求，需要采取一些高級的自定義動畫來解決問題，Jquery中定義了animate()方法來實現自定義動畫，語法結構為：animate(params,speed,callback);
參數如下：params一個包含樣式屬性及值的映射，比如：{width:"500",height:"300",....};speed速度參數，可選。callback在動畫完成時執行的函數，也是可選的。
1、自定義簡單動畫
自定義一個簡單動畫使元素中頁面飄動,示例如下：
先定義樣式
<style type="text/css">
.panel
{
position: relative; //位置樣式必須為relative或者absolute.
width: 200px;
height: 200px;
border: 1px solid;
background: #96E555;
}
</style>
頁面中定義一個div元素class="panel"。
<div class="panel"></div>
設置元素點擊事件時候觸發動畫事件，事件綁定函數如下：
$(".panel").click(function () {
$(this).animate({ top: "100px", left: "500px" }, 1000);
});
這樣一個簡單的動畫就完成了，頁面加載完成后當點擊元素時候div元素會中1秒內，移動到指定位置。
2、累加動畫
上面只實現了一次性位置改變，也實現累加改變位置動畫，只需要改變事件綁定函數如下:
$(".panel").click(function () {
$(this).animate({ top:"+=100px", left: "+=50px" }, 1000);
});
這樣連續點擊div元素時元素位置會連續改變。實現了動畫的累加。
3、順序動畫
上面的動畫top位置和left位置是同時改變的，也可以順序執行位置改變動畫，如下：
$(".panel").click(function () {
$(this).animate({ top: "+=50px" }, 1000);
$(this).animate({ left: "+=50px" }, 1000);
});
這樣當點擊div元素時候動畫就會順序執行先改變top位置，再改變left位置，連續點擊連續改變。也可以改寫成鏈式形式如下：
$(".panel").click(function () {
$(this).animate({ top: "+=50px" }, 1000).animate({ left: "+=50px" }, 1000);
});
像這樣的動畫的執行按順序執行，又可以稱為"動畫隊列"。
4、回調函數
在動畫結束后可以使用回調函數改變元素的樣式、內容等來達到想要的顯示效果。如在div元素示例中添加回調函數如下：
$(this).animate({ top: "+=50px" }, 1000).animate({ left: "+=50px" }, 1000, function () { $(this).css("border", "5px solid blue"); });
通過在最后一個animate方法加添加回調函數，在動畫結束后回調函數會改變元素的邊框寬度和顏色。
5、停止動畫和動畫狀態
上面的示例中如果連續點擊div元素，動畫會一直執行相應的次數后才停止，使用stop()方法可以停止正在進行的動畫。stop方法結構是stop([clearqueue],[gotoEnd])兩個參數都是可選參數，參數都是bool值true或false。如果clearqueue為true則方法會清除動畫隊列，如果gotoEnd為true動畫直接跳轉到結束狀態。以合成事件hover為例：使用上面的div元素為元素綁定hover事件如下：
$(".panel").hover(function(){$(this).stop().animate({height:"200px"},2000);},function(){$(this).stop().animate({height:"300px"},2000);});
該示例中使用無參數的stop()方法停止當前正在執行的動畫然后執行stop()方法后面的新的動畫。不帶參數的stop方法停止的是當前正在執行的動畫，如果是當前動畫后有動畫等待執行stop()方法后后面的動畫會繼續執行，此時需要使用帶參數的stop方法停止動畫並清空動畫隊列，或者使動畫直接到達最后狀態。
動畫狀態用於判斷元素是否處理正在動畫狀態，判斷方法和jquery選擇器一樣使用.is(":animated")方法來判斷，使用該方法可以跟據元素是否處於動畫狀態來做出相應的操作。例：如果元素處理動畫狀態就不添加新的動畫，否則添加新動畫。
if(!$(".panel").is(":animated")){$(this).animate({left:"+=300"},2000);}
6、交互的動畫方法
Jquery提供了3種專門用於交互的動畫方法:toggle(speed,[callback])、slideToggle(speed,[callback])、fadeTo(speed,opacity,[callback])。
toggle方法用於切換元素的可見性狀態，如果元素是隱藏的則顯示元素，如果元素是可見的則隱藏狀態。例：
$("#btntoggle").click(function () {
$(this).prev("div.panel").toggle(3000, function () { alert($("div.panel").is(":visible")); });
});
該示例使用toogle交互方法改變div元素的可見性，在動畫結束后打印元素的當前可見性狀態。
slideToggle方法用於通過改變高度改變元素的可見性狀態，例：
$("#btntoggle").click(function () {
$(this).prev("div.panel").slideToggle(3000, function () { alert($("div.panel").is(":visible")); });
});
該示例通過使用slideToggle方法改變元素的高度實現元素的可見性改變，最后在動畫執行結束后執行回調函數打印元素的當前狀態。
fadeTo方法用於改變元素的透明度，使用該方法也可以實現可見性的改變。例：
$("#btntoggle").click(function () {
$(this).prev("div.panel").fadeTo(3000,0.2,function () { alert($("div.panel").css("opacity"); });
});
使用方法改變元素的透明度，然后使用回調函數打印元素的當前透明度。