C2:動畫隊列

動畫隊列

隊列的做用就是讓咱們把一個又一個的任務放到一塊兒，確保只有當前面的任務完成了，纔會開始下一個任務。這裏面的任務能夠是同步的，也能夠是異步的。

jQuery的動畫系統就是執行一個函數隊列。對jQuery元素應用fade,slide,animate等動畫，都會默認將函數壓入一個fx的隊列。在咱們使用jq的animate()的時候，咱們能夠在option參數中傳入一個queue的標誌位來決定這個動畫時候壓入當前元素的動畫隊列。若是爲false,則不等待當前隊列完成，而是當即執行該動畫。

$element.queue(fun(next)) 讓咱們向隊列中插入一個函數，當咱們向一個空隊列或者插入函數的時候，該函數會當即執行。不然將排到隊尾執行。插入的這個函數fun能夠執行一個同步或者異步的任務，可是不管是同步仍是異步任務，若是咱們想讓排在fun後面的隊列函數可以執行，都不要忘了在同步/異步任務完成以後使用next()。這個next 是jQuery的隊列系統在調用fun的時候傳入的，它是一個函數，執行它就可讓隊列繼續執行。

jQuery動畫隊列Api

.queue(): 向隊列中添加一個隊列函數，或者替換掉當前隊列。速查
.dequeue(): 當咱們替換了一個新隊列以後，或者使用.stop 中止一個隊列以後，咱們須要這個函數來從新啓動隊列。速查
.stop(): 中止當前隊列中正在進行的任務。它還接收一個 jumptoend的參數,若是傳入true,則直接跳到當前動畫的終態。注意不必定是動畫隊列的最後一個動畫終態。速查
.delay()：設置一個延時來讓隊列延遲執行。

更快的velocity.js

之前比較老的版本的jQuery的動畫是使用定時器來完成的，新版本的jQuery增長了一項判斷，若是瀏覽器支持window.requestAnimationFrame,則會使用window.requestAnimationFrame.

jQuery 的動畫性能在移動端表現不佳，由於定時器或者其餘的問題。velocity是一款性能更好的動畫庫。官方文檔的介紹也屢次強調它的快，甚至要超過css3 transition了。它的api設計和jQuery.animate差很少同樣，其中動畫隊列的用法也和jQuery.queue同樣。它能夠和jQuery一塊兒使用。當不引用jQuery時，Velocity時掛載在window對象中的，當引用jQuery的時候，就掛載在jQuery對象下。只需在原先使用$.aniamte()的地方替換成$.velocity()，就切換到了velocity動畫庫。

velocity 兼容

velocity.js v2.0版本 官方目前支持IE11, Edge, Chrome, Safari, and Firefox。（我本身用的時候，V2.0在IE11，edge會報錯。）。因此通常用V1.5。(兼容性好了，性能就要犧牲一點。)並且在若是要支持到IE8,就必須引入jQuery1.X版本。

velocity 特性

它支持屬性值函數，顏色動畫，CSS3的transform,scroll(頁面或者元素的滾動),svg,能夠配合velocity.ui.js 註冊動畫集合，管理多個元素應用同一動畫時的間隔，velocity.ui.js還內置了多種動畫特效，方便選擇。

velocity.js還提供了Velocity('finish')指令來當即完成整個動畫隊列。

velocity.js中文官網