轉載自個人部落格
jQuery自帶動畫效果
一. 顯示、隱藏
jQuery中.show()為顯示方法，.hide()為隱藏方法。
在無引數的時候，只是硬性的顯示內容和隱藏內容。就不用程式碼來演示了，.hide()方法其實就是把物件的css設為display：none；而.show()方法會保留原來的display值，並進行設定。但是在一些場景中會有所改變，在後面進行說明）。
這兩個方法都可以帶引數。
先來說明第一個引數：
-
第一種用法是傳入數字，為毫秒數，表示動畫過渡效果的時間。裡面同時富含了勻速變大變小，以及透明度變換。
<button class="show">顯示</button>
<button class="hide">隱藏</button>
<div id="box">塊</div>
<script>
$(".show").click(function() {
$("#box").show(1000);//顯示用了一秒
});//可以看到很明顯的動畫過渡效果。
$(".hide").click(function() {
$("#box").hide(1000);
});
</script>-
第二種用法是傳入一個字串。”slow”、”normal”和”fast”，分別對應600毫秒、400毫秒和200毫秒。在傳入空字串或其他字串引數時，預設為400毫秒。
-
傳入一個物件，後面的引數就不能填了，都在物件中。這個比較強大，整合了
show()方法的多種引數實現效果外，還有一些其他的方法，比如可以動畫執行中的狀態，來執行函式。比較複雜，而且日常使用的話，現在這個就已經夠了，在這裡並不做講述，有興趣的可以自己參考手冊。
特別注意：在傳入了速度之後，內聯元素inline，隱藏顯示過後會變成內聯塊，inline-block。假設你給一個內聯元素的css中設定了寬高，本來不生效，但是在執行隱藏顯示後寬高生效
第二個引數：為可選引數，easing運動方式，這個引數，大部分引數值需要通過外掛來使用，以後再來講解。自帶的引數有兩個：”swing”(緩動)、”linear”(勻速)，不填時，預設為”swing”。（注意這裡傳入一個錯誤引數，會報錯）
第三個引數：可選，回撥函式，第一個動畫執行完畢後執行，實現鏈式動畫。
<button class="show">顯示</button>
<button class="hide">隱藏</button>
<div class="test">一</div><div class="test">二</div><div class="test">三</div><div class="test">四</div>
<script>
$(`.show`).click(function () {//鏈式動畫，遞迴自呼叫
$(`.test`).first().show(`fast`, function testShow() {
$(this).next(".test").show(`fast`, testShow);
});//注意next中的限制條件，不然會干擾其他的元素，執行該函式。
});
$(`.hide`).click(function () {
$(`.test`).last().hide(`fast`, function() {
$(this).prev(".test").hide(`fast`, arguments.callee);
});//這裡只是展現有arguments.callee這種方式，並不推薦使用，建議使用函式遞迴自呼叫
});
</script>我們在使用.show()和.hide()的時候，如果需要一個按鈕切換操作，需要進行一些條件判
斷。而 jQuery 提供給我們一個類似功能的獨立方法：.toggle()。使用方法一樣。
$(".toggle").click(function(){
$("div").toggle("fast");
});二. 滑動、捲動
jQuery 提供了一組改變元素高度的方法：.slideUp()、.slideDown()和.slideToggle()。顧名思義，向上收縮(捲動)和向下展開(滑動)。
$(`.toggle`).click(function () {
$(`div`).slideToggle();
});注意：滑動、捲動效果和顯示、隱藏效果一樣，具有相同的引數。不展開講
三. 淡入、淡出
jQuery 提供了一組專門用於透明度變化的方法：.fadeIn()和.fadeOut()，分別表示淡入、
淡出，當然還有一個自動切換的方法：.fadeToggle()。
但是上面三個透明度方法只能是從 0 到 100，或者從 100 到 0，如果我們想設定指定值就沒
有辦法了。而 jQuery 為了解決這個問題提供了.fadeTo()方法，使透明度到達指定值：
$(".toggle").click(function() {
$("#box").fadeToggle(`slow`);
});
$(".to").click(function() {
$("#box").fadeTo(`slow`, 0.3);//表示30，jQuery中使用的是百分比的形式來設定
});注意：最先點選to透明度變成0.3，再點選toggle，第一次點選隱藏，第二次點選顯示透明度為0.3！（回到原有設定）
淡入、淡出和上面的顯示、隱藏效果一樣，具有相同引數
自定義動畫
jQuery提供了上面幾種簡單常用的固定動畫方面我們使用。但有些時候，這些簡單動畫無法滿足我們更加複雜的需求。這個時候，jQuery 提供了一個
.animate()方法來建立我們的自定義動畫，滿足更多複雜多變的要求。
強烈建議先看我的《JavaScript完美運動框架的進階之旅》，使用JS基本實現了自定義動畫，只不過jQuery的更加全面完善，當然也更加複雜。
必傳引數只有一個，物件，實現動畫：
$("button").click(function() {
$("#box").animate({
width: "200px",
height: "500px"});
});這段程式碼已經實現了多重動畫同步運動的效果，使用鍵值對的方式，來表明運動動畫終點的位置。在實現上下左右移動時，需要結合CSS，把物體屬性設定絕對定位！
第二個引數，可選，使用字串時如同上面一樣的3個值表示不同的時間（預設400ms），數字型別時，使用毫秒方式。直接跟在第一個引數之後就好
第三個引數，可選，也和上面一樣，easing運動方式，自帶的引數有兩個：”swing”(緩動)、”linear”(勻速)，不填時，預設為”swing”。（注意這裡傳入一個錯誤引數，會報錯）
第四個引數，可選，回撥函式，在動畫執行完畢後執行，可實現鏈式動畫。
下面進行一些特殊的說明：
自定義動畫中，每次開始運動都必須是初始位置或初始狀態，而有時我們想通過當前位置或狀態下再進行動畫。jQuery 提供了自定義動畫的累加、累減功能。
$("button").click(function() {
$("#box").animate({//必須先設定CSS的絕對定位。
left:"+=100px"
});
});主要是說一下自定義動畫中的鏈式動畫，有兩種形式：
-
在回撥函式中再執行一個動畫，這個沒什麼好說的。
-
通過連綴或順序來實現鏈式動畫。
通過依次順序實現鏈式動畫
$(`button`).click(function () {
$(`#box`).animate({`left` : `100px`});
$(`#box`).animate({`top` : `100px`});
$(`#box`).animate({`width` : `300px`});
});注意：如果不是同一個元素，就會實現同步動畫
通過連綴實現鏈式動畫
$(`button`).click(function () {
$(`#box`).animate({`left` : `100px`})
.animate({`top` : `100px`})
.animate({`width` : `300px`});
});鏈式動畫進階
之前我們已經可以實現鏈式動畫了，如果是同一個元素，可以依次順序或連綴呼叫。如果是不同元素，可以使用回撥函式。但有時鏈式動畫太多，回撥函式的可讀性大大降低。為此，jQuery 提供了一組專門用於鏈式動畫的方法。
$(`#box`).slideUp(`slow`).slideDown(`slow`).css(`background`, `orange`);這段程式碼中，css方法會在一開始就執行。因為動畫方法可以用連綴來實現依次排列，但是css方法不是，會在一開始傳入佇列之前。如何解決呢？回撥函式當然可以實現。
$(`button`).click(function () {
$(`#box`).slideUp(`slow`).slideDown(`slow`,function (){
$(this).css(`background`, `orange`);
});
});這當然沒問題，但是那並不是我們應該做的，因為這樣可讀性太差了，鏈式動畫一多呢？原本的動畫都不清晰了吧？jQuery為我們實現了一個類似回撥函式的方法：.queue()。jQuery 的.queue()的回撥函式可以傳遞一個引數，這個引數是 next 函式，在結尾處呼叫這個 next()方法即可再連綴執行列隊動畫。（不這樣使用的話，後續動畫效果無法實現）
$(`button`).click(function () {//在同一個元素直接這樣寫就可以了。
$(`#box`).slideUp(`slow`)
.slideDown(`slow`)
.queue(function (next) {
$(this).css(`background`, `orange`);
//next();//animate的動畫效果不會生效，因為把next()註釋掉了。
})
.animate({//記得設定絕對定位
height: "200px",
left: "100px"
});
});.queue()方法還有一個功能，就是可以得到當前鏈式動畫剩餘的長度（包括當前的動畫）。fx 是預設鏈條的引數。
//把上面的程式碼的第一個動畫改裝成如下模樣時，會彈出4。
$(`#box`).slideUp(`slow`,function (){
alert($(this).queue(`fx`).length);
})jQuery 還提供了一個清理鏈式動畫的功能方法：.clearQueue()。把它放入一個鏈式的回撥函式或.queue()方法裡，就可以把剩下未執行的鏈條給截斷。
//清理後續鏈式呼叫
$(`#box`).slideDown(`slow`, function () {$(this).clearQueue()});動畫相關方法與全域性屬性
停止動畫
有很多時候，我們需要停止正在執行中的動畫，jQuery中為此提供了一個.stop()方法。
它有三個可選引數：
-
queue 型別: String 停止鏈式動畫的名稱。（比較少用到，若存在，後兩個引數都是指向該鏈式動畫）
-
clearQueue型別: Boolean一個布林值，指示是否取消後續的鏈式動畫。預設 false.
-
jumpToEnd 型別: Boolean一個布林值指示是否當前動畫立即完成。預設false.
說明：
-
在無引數，且為鏈式動畫時，呼叫
.stop()方法，只是立即停止當前正在進行的動畫，後續動畫繼續執行。 -
傳入一個true時，立即停止動畫，並且清空後續所有動畫。
-
傳入2個true時，立即停止，並且跳轉到當前動畫的結束位置，後續動畫也不再執行。
程式碼如下：有興趣的自行測試
<button class="start">動畫</button>
<button class="stop">停止</button>
<div style="position: absolute;height: 50px;width: 50px;background-color: #0B71E6;top:30px">12</div>
<script type="text/javascript">
$(`.start`).click(function () {
$(`div`).animate({`left` : `300px`}, 1000)
.animate({`top` : `300px`}, 1000)
.animate({ `width` : `300px`}, 1000)
.animate({`height` : `300px`}, 1000);
});
$(".stop").click(function() {
$("div").stop(true,true);
});
</script>延遲動畫
有時在執行動畫或鏈式動畫時，需要在運動之前有延遲執行，jQuery 為此提供了.delay()方法。引數為延遲時間，單位為毫秒數。這個方法可以在動畫之前設定延遲，也可 、以在列隊動畫中間加上。直接在上面程式碼任意地方加都可以，比較簡單，自行測試吧。
獲取正在進行的動畫
在選擇器的那篇文章中中，我們提到過一個過濾器:animated，這個過濾器可以判斷出當前運動的動畫是哪個元素。通過這個特點，我們可以避免由於使用者快速在某個元素執行動畫時，由於動畫積累而導致的動畫和使用者的行為不一致。
對上面程式碼進行一些改造,將原div進行復制，新增到其後，給原div新增一個id並且在動畫效果中改為該元素運動
$(`.stop`).click(function(){
$(`div:animated`).stop().css(`background`, `red`);
//可以看到只有運動的div背景變色，而未移動的div不改變背景色。
});動畫全域性屬性
jQuery 提供了兩種全域性設定的屬性，分別為：$.fx.interval，設定每秒執行的幀數；$.fx.off，關閉頁面上所有的動畫。
$.fx.interval 屬性可以調整動畫每秒的執行幀數，預設為 13 毫秒。數字越小越流暢，但可能影響瀏覽器效能。
設定執行幀數為 1000 毫秒：$.fx.interval = 1000;
設定動畫為關閉 true：$.fx.off = true;預設為false