動畫效果是jQuery庫中很吸引人的地方，通過jQuery的動畫方法，可以很方便的為網頁添加視覺效果，給用戶一些更棒的體驗
1、基礎方法：hide()和show()
基礎語法：$('element').hide([duration ] [,easing ] [,complete ])
通過hide方法可以隱藏元素，當這里沒有出現參數的時候等同于設置display屬性: $('element').css("display","none")
這里的三個參數分別表示：
1、duration：動畫持續時間
2、easing：表示過渡動畫使用那種緩動函數，jQuery自身提供"linear" 和 "swing"
3、complete：在動畫完成時執行的函數
使用
$('.target').hide(); //直接隱藏，不使用可選參數
$('.target').hide(300, function() { //300ms后元素被隱藏，并執行匿名函數
alert('Animation complete');
}
show()方法
基礎語法：$('element').show([duration ] [,easing ] [,complete ])
用于顯示元素，用法與hide類似，這里就不展開了
這里我們可以看出來show與hide是一對互斥的方法。需要對元素進行顯示隱藏的互斥切換，通常情況是需要先判斷元素的display狀態，然后調用其對應的處理方法。對于這樣的操作行為，jQuery提供了一個便捷方法toggle用于切換顯示或隱藏匹配元素
toggle( [duration ] [, easing ] [, complete ] )
這里補充的一個方法是toggle()，用來切換元素的隱藏、顯示，類似于toggleClass，用法和show、hide類似,舉個例子，當發現選取元素被隱藏，調用toggle()方法就由隱藏到出現；當發現選取元素是顯示的，調用toggle()方法就由隱藏到出現。
HTML
<style>
div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left {
background: #bbffaa;
}
.right {
background: yellow;
display: none;
}
</style>
<div class="left">顯示到隱藏</div>
<div class="right">隱藏到顯示</div>
<button>直接show-hide動畫</button>
<button>直接hide-show動畫</button>
toggle()方法切換
<script type="text/javascript">
$("button:first").click(function() {
$(".left").toggle(3000) //顯示到隱藏的切換
});
$("button:last").click(function() {
$(".right").toggle(3000) //隱藏到顯示的切換
});
</script>
2、漸變效果
fadeIn、fadeOut
同show()方法不同的是，fadeIn()和fadeOut()方法只改變元素的不透明度，fadeOut()在指定的一段時間內降低元素的不透明度，知道元素完全消失（display：none）,fadeIn()則反之。
語法：fadeOut([duration ] [, easing ] [, complete ])，fadeIn用法同理
fadeToggle
用法與上面的toggle類似，切換淡入和淡出方法
3、滑動效果
slideDown()
語法：slideDown( [duration ] [, easing ] [, complete ] )
用滑動動畫顯示一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去，彌補了顯示的方式
slideUp()
語法：slideUp( [duration ] [, easing ] [, complete ] )
用滑動動畫隱藏一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑上去，當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面布局。
slideToggle()
用滑動動畫顯示或隱藏一個匹配元素，用法與toggle、fadeToggle方法類似
4、自定義動畫animate
語法：.animate(properties,options)
參數分析：
properties:是一個或多個css屬性的鍵值對所構成的Object對象。要特別注意所有用于動畫的屬性必須是數字的，比如常見的border、margin、padding、width、height、left、top、font等等都是可以產生動畫效果的，下面給一個簡單的寫法
.animate({
left: 50
width: 50
opactity: 'show' //每一個屬性可以使用show/hide/toggle來控制元素的顯示或者隱藏
fontSize: "10em"
},500)
options: 參數options是一組包含動畫選項的值的集合。 常用的選項:
1、duration (default: 400)：一個字符串或者數字決定動畫將運行多久。默認值: "normal"， 三種預定速度的字符串("slow", "normal", 或 "fast"或表示動畫時長的毫秒數值(如：1000) ）
2、easing (default: swing)：一個字符串，表示過渡使用哪種緩動函數。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
3、step：每個動畫元素的每個動畫屬性將調用的函數。這個函數為修改Tween 對象提供了一個機會來改變設置中得屬性值。
4、complete：在動畫完成時執行的函數
下面舉一個例子來演示
HTML
<style>
.div {
width:80px;
height:80px;
background-color:red;
position:relative
}
</style>
<button id="btn1">變寬</button>
<button id="btn2">復原</button>
<button id="btn3">變寬變大移動</button>
<button id="btn4">多個動畫</button>
<button id="btn5">停止動畫</button>
<div class="div"></div>
animate動畫的使用
$div = $('.div')
$("#btn1").on('click', function(e){
$div.animate({width: '200px'});
});
$("#btn2").on('click', function(){
$div.animate({
width:'80px',
height: '80px',
left: '0px',
top: '0px',
opacity: 1
}, 500);
});
$("#btn3").on('click', function(){
$div.animate({
width:'150px',
height: '150px',
left: '100px',
top: '100px',
opacity: 0
}, 500);
$('#btn4').on('click',function(){
$div.animate({width:'150',height:'150px'}) //采用jQuery的鏈式調用寫法，簡化代碼
.animate({left:'200px'})
.animate({top:'200px'})
.animate({left:'0px'})
.animate({top:'0px'})
.animate({width:'80px',height:'80px'})
})
$('#btn5').on('click',function(){ //點擊對應按鈕可停止動畫
$div.stop(true)
})
stop()方法--停止動畫
語法：
.stop( [clearQueue ], [ jumpToEnd ] )
當一個元素調用.stop()，當前正在運行的動畫（如果有的話）立即停止，如果同一元素調用多個動畫方法，尚未被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。
當調用.stop()的時候，隊列中的下一個動畫立即開始。如果clearQueue參數提供true值,那么在隊列中的動畫其余被刪除并永遠不會運行；如果提供jumpToEnd參數，并且值為true時，當前動畫將停止，但該元素上的 CSS 屬性會被立刻修改成動畫的目標值。
我知道上面的可能有點抽線難以理解，簡單使用就是：
1、stop()：只會停止第一個動畫，第二個第三個繼續...
2、stop(true)：停止第一個、第二個和第三個動畫...
3、stop(true ture)：停止動畫，直接跳到第一個動畫的最終狀態
