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中文官网