知道動畫處理的基本原理與算法了，那么 jQuery 在這個基礎上封裝擴展，讓動畫使用起來更靈活方便。
我歸納有幾點：
基于 promise 的事件通知
得益于 deferred 的機制，可以讓一個對象轉化成帶有 promise 的特性，實現了 done/fail/always/progress 等等一系列的事件反饋接口。
這樣的設計我們并不陌生，在 ready、ajax 包括動畫都是基于這樣的異步模型的結構：
deferred = jQuery.Deferred()
//生成一個動畫對象了
animation = deferred.promise({}) //混入動畫的屬性與方法
那么這樣操作的一個好處就是，可以把邏輯處理都放到一塊，我們在代碼的某一個環節針對特別的處理，需要臨時改變一些東西，但是在之后我們希望又恢復原樣，為了邏輯的清晰，我們可以引入 deferred.alway 方法，在某一個環節改了一個屬性，然后注冊到 alway 方法上一個完成的回調用來恢復，這樣的邏輯塊是很清晰的。
增加屬性的 show/hide/toggle 的快捷方式：
style.overflow = "hidden";
anim.always(function() {
//完成后恢復溢出
style.overflow = opts.overflow[0];
style.overflowX = opts.overflow[1];
style.overflowY = opts.overflow[2];
});
指定中文參數是比較特殊的，這種方式也是 jQuery 自己擴展的行為，邏輯上也很容易處理。
ook.animate({
left: '50',
height:'hide'
}
height 高度在動畫結束之后隱藏元素，那么意味著元素本身的高度 height 也是需要改變的，從初始的位置慢慢的遞減到 0 然后隱藏起來。
代碼中有這么一段，針對 hide 的動作，我們在 done 之后會給元素直接隱藏起來。
//目標是顯示
if (hidden) {
jQuery(elem).show();
} else {
//目標是隱藏
anim.done(function() {
jQuery(elem).hide();
});
}
其實 show 與 hide 的流程是一樣的，只是針對元素在初始與結束的一個狀態的改變。
css 屬性設置獨立的緩動函數
在動畫預初始化之后(為了支持動畫，臨時改變元素的一些屬性與狀態)，我們就需要給每一個屬性生成一個獨立的緩動對象了 createTween，主要用于封裝這個動畫的算法與執行的一些流程操作控制。
//生成對應的緩動動畫 //
createTween: function(prop, end) {
var tween = jQuery.Tween(elem, animation.opts, prop, end,
animation.opts.specialEasing[prop] || animation.opts.easing);
//加入到緩動隊列
animation.tweens.push(tween);
return tween;
}
tween 對象
通過這個結構大概就知道了，這個就是用于生成動畫算法所需要的一些數據與算法的具體流程控制了。
屬性預處理
我們知道元素本身在布局的時候可以用很多屬性對其設置，可是一旦進行動畫的話，某些屬性的設置可能會對動畫的執行產生副作用，所以針對這樣的屬性，jQuery 直接在內部做了最優的處理，如果我們進行元素 height/width 變化的時候，比如 height:1，這樣的處理 jQuery 就需要針對元素做一些強制性的處理。
1 添加 overflow =“hidden” 2.如果設置了內聯并且沒有設置浮動 display = "inline-block";
因為內容溢出與內聯元素在執行動畫的時候，與這個 height/width 的邏輯是符合的，當然針對這樣的修改 jQuery 非常巧妙了用到了 deferred.always 方法，我們在執行動畫的時候，由于動畫的需要改了原始的屬性，但是動畫在結束之后，我們還是需要還原成其狀態。
deferred 量身定做的 always 方法，不管成功與失敗都會執行這個復原的邏輯。
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報