jQuery 動畫其實原理上本身是不復雜的。量變產生質變，參雜了大量的設計技巧，同時通過擴展大量的便捷方式加大了邏輯上的難度，我們這章深入的認識下 jQuery 的 API 的具體的含義以及實現上的一些細節。

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

動畫的參數

jQuery的內部的方法都是針對 API 的處理范圍設計的，我們看看 Animation 方法的支持情況：

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

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

簡單的來說，就是把一對的參數丟到 animate 方法里面，然后 animate 就開始執行你參數規定的動畫了，那么動畫每執一次就會通過回調通知告訴開發者，具體有 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('動畫完成')
    }
})

首先，動畫的參數都是最終值，都是相對數據。

如上 div 元素的起始：

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

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