jQuery 動畫其實(shí)原理上本身是不復(fù)雜的。量變產(chǎn)生質(zhì)變，參雜了大量的設(shè)計(jì)技巧，同時(shí)通過擴(kuò)展大量的便捷方式加大了邏輯上的難度，我們這章深入的認(rèn)識下 jQuery 的 API 的具體的含義以及實(shí)現(xiàn)上的一些細(xì)節(jié)。

jQuery 動畫是通過 animate 這個(gè) API 設(shè)置執(zhí)行的，其內(nèi)部也是按照每一個(gè) animate 的劃分封裝了各自動畫組的行為，包括數(shù)據(jù)過濾、緩動公式、一些動畫默認(rèn)參數(shù)的設(shè)置、元素狀態(tài)的調(diào)整、事件的處理通知機(jī)制、執(zhí)行等等，換句話說，我們可以把 animate 看作一個(gè)對象，對象封裝自己的一系列屬性與方法，jQuery 可以支持連續(xù)動畫，那么 animate 與 animate 之間的切換就是通過隊(duì)列 queue，這個(gè)之前就已經(jīng)詳細(xì)的解釋過了。

動畫的參數(shù)

jQuery的內(nèi)部的方法都是針對 API 的處理范圍設(shè)計(jì)的，我們看看 Animation 方法的支持情況：

.animate( properties [, duration ] [, easing ] [, complete ] )
.animate( properties, options )

• 區(qū)別就與第二組數(shù)據(jù)的傳遞，options 是支持對象傳參
• properties 參數(shù)就是寫一個(gè) CSS 屬性和值的對象，動畫都是涉及變化的，那么什么值才能變化?
• 理論上來說有數(shù)值的屬性都是可以變化的，width, height 或者 left 可以執(zhí)行動畫，但是 background-color 不能，但是也不是絕對的，主要看數(shù)據(jù)的解析度，可以用插件支持
• 除了樣式屬性， 一些非樣式的屬性，如 scrollTop 和 scrollLeft，以及自定義屬性，也可應(yīng)用于動畫
• 除了定義數(shù)值，每個(gè)屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏。為了使用 jQuery 內(nèi)置的切換狀態(tài)跟蹤，'toggle'關(guān)鍵字必須在動畫開始前給定屬性值

簡單的來說，就是把一對的參數(shù)丟到 animate 方法里面，然后 animate 就開始執(zhí)行你參數(shù)規(guī)定的動畫了，那么動畫每執(zhí)一次就會通過回調(diào)通知告訴開發(fā)者，具體有 complete/done/fail/always/step 接口等。

理解定義(代碼參考右邊)

book.animate({
    opacity: 0.25,
    left: '50',
    height: 'toggle'
}, {
    duration :1000,
    specialEasing: {
        height: 'linear'
    },
    step: function(now, fx) {
        console.log('step')
    },
    progress:function(){
        console.log('progress')
    },
    complete:function(){
        console.log('動畫完成')
    }
})

首先，動畫的參數(shù)都是最終值，都是相對數(shù)據(jù)。

如上 div 元素的起始：

• opacity： 是 1，那么通過動畫改成 0.25
• left： 是 500，那么通過動畫改成 50
• height： 為'toggle' 意味著如果是隱藏與顯示的自動切換
• step：是針對 opacity/left/height 各自動畫，每次改變通知三次
• progress： 是把 opacity/left/height 看成一組了，每次改變只通知一次

初步理解 API 的一些設(shè)置后，我們下一節(jié)研究下動畫的變換算法。