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