jQuery中的動畫
show()方法和hide()方法
控制元素的顯示與隱藏，可以為該方法添加參數(shù)盏触，使得元素可以動起來阳惹。
- 可以為該方法傳遞一個速度關(guān)鍵字slow、normal琼了、fast（600毫秒、400毫秒夫晌、200毫秒）
- 可以為該方法的顯示速度指定一個數(shù)字雕薪，單位是毫秒（1000毫秒）
fadeIn()方法和fadeOut()方法
與show()方法不同的是，fadeIn()與fadeOut()方法只改變元素的不透明度晓淀。
slideDown()方法和slideUp()方法
slideDown()方法和slideUp()方法只會改變元素的高度
自定義動畫方法animate()
animate(params,speed,callback);
- params：一個包含巖石屬性及值的映射所袁，比如{property1:'value1',prperty2:'value2',...}
- speed：速度參數(shù)，可選
- callback：在動畫完成時的執(zhí)行函數(shù)凶掰，可選
綜合動畫示例
$('div').mouseover(function () {
$(this).animate({
left: '+=300px',
top: '+=300px',
width: '200px',
height: '200px',
opacity: '0.3'
},2000).animate({
left: '+=300px',
top: '-=300px',
width: '100px',
height: '100px',
opacity: '1'
},2000).fadeOut('3000');
});
自定義動畫方法animate()
在上例中燥爷，若想在動畫完成之后為div元素添加一個邊框css('border','1px solid #0f0')。這樣并不能得到預(yù)期的效果懦窘，而實際效果就是前翎，剛開始執(zhí)行動畫的時候，css()的方法就執(zhí)行了畅涂。其根本原因在于css()并不會加入到動畫隊列中港华，而是會立即執(zhí)行。
如果想要達到預(yù)期的效果午衰，我們需要把使用回調(diào)函數(shù)callback來對非動畫方法實現(xiàn)排隊
停止動畫和判斷是否處于動畫狀態(tài)
1.停止元素的動畫
很多時候我們需要停止匹配元素正在進行的動畫立宜，此時我們需要使用stop()方法
stop([clearQueue],[gotoEnd]);
參數(shù)clearQueue與gotoEnd都是可選的，都為Boolean值臊岸。clearQueue表示立即清空為執(zhí)行完的動畫橙数，gotoEnd代表是否直接將正在執(zhí)行的動畫跳轉(zhuǎn)到末狀態(tài)。
直接使用stop()方法帅戒，則會立即停止當前正在執(zhí)行的動畫商模，如果接下來還有動畫等待執(zhí)行，則以當前狀態(tài)開始接下來的動畫。
當為一個使元素綁定hover事件之后施流，用戶把光標移入元素時會觸發(fā)動畫效果响疚，而當這個動畫還沒結(jié)束時，用戶就將光標移出了瞪醋。那么改變移出時執(zhí)行的動畫就會被放入隊列中忿晕，等待光標移入的動畫結(jié)束后再執(zhí)行。因此如果光標 的移入移出過快的話银受，就會導致動畫效果與光標的動作不一致践盼。此時只需要在光標的移入移出的動畫之前加入stop()方法，就可解決宾巍。
$('div').hover(function () {
$(this).stop().animate({
width: '200px',
});
},function () {
$(this).stop().animate({
height: '50px'
});
});
可是如果遇到組合動畫
$('div').hover(function () {
$(this).stop().animate({
width: '200px',
}).animate({
left: '+=300px',
});
},function () {
$(this).stop().animate({
height: '50px'
});
});
這時的stop()只會停止正在進行的動畫咕幻。如果動畫正在執(zhí)行第一階段（改變width）鼠標觸發(fā)移出事件之后，只會停止當前的動畫顶霞，并繼續(xù)執(zhí)行改變left的動畫肄程，而光標移出事件要等這個動畫完成后才能執(zhí)行。在這種情況下选浑，我們可以設(shè)置stop()方法的第一個參數(shù)為true蓝厌，此時程序會把當前元素接下來的尚未執(zhí)行動畫全部清空。第二個參數(shù)gotoEnd用于直接讓當前動畫到達結(jié)束時刻古徒，通常用于后一個動畫需要基于前一個動畫的末狀態(tài)的情況拓提。
2. 判斷元素釋放處于動畫狀態(tài)
在使用animate()動畫的時候，要避免動畫積累導致動畫與用戶的行為不一致隧膘。解決辦法就是判斷元素是否處于動畫狀態(tài)代态，如果元素不處于動畫狀態(tài)，才為元素添加新的動畫疹吃。
及其重要胆数，特別常用
if (!$(element).is(':animated')){ //判斷元素釋放處于動畫狀態(tài)
//如果沒有處于動畫狀態(tài)，則添加新動畫
}
3. 延遲動畫
在動畫執(zhí)行過程中互墓，如果想對動畫進行延遲操作，可以使用delay()方法
$(this).animate({left: '400px'},3000)
.delay(1000)
.animate({top: '100px'},2000)
.delay(2000)
.animate({height: '100px'},800);
4. 其他動畫方法
- toggle(speed,[callback]) 切換樣式的可見狀態(tài)
- sildeToggle(speed,[easing],[callback]) 通過高度的變化來切換元素的可見性
- fadeTo(speed,opacity,[callback]) 將元素的不透明度以漸進的方法調(diào)整到指定值
- fadeToggle(speed,[easing],[callback]) 通過不透明的變化來切換元素的可見性
動畫隊列
- 當在一個animate()方法中應(yīng)用多個屬性時蒋搜，動畫是同時發(fā)生的
- 當以鏈式寫法應(yīng)用動畫方法時篡撵，動畫是按順序發(fā)生的
