Jquery效果：隐藏显示，淡入淡出，滑动，动画总结

总览

动画

jquery中有一个Queue队列的接口，如同data数据缓存与Deferred异步模型一样，都是jQuery库的内部实现的基础设施

队列是一种特殊的线性表，只允许在表的前端（队头）进行删除操作（出队），在表的后端（队尾）进行出入操作（入队），队列的特点是先进先出，最先插入的元素最先被删除。

为什么要引入队列?
我们一直习惯于线性的编写代码逻辑，但是在JavaScript编程几乎总是伴随着异步操作：setTImeout，css3Transition/Animation,ajax,dom的绘制，postmessage，web Database 等等，大量异步操作所带来的回调函数会把我们的算法分解，嵌套大量的回调逻辑，对于“异步+回调”的模式，为了“拉平”异步操作使之跟同步一样，出现 promises 约定了。

那么 jQuery 引入队列其实从一个角度上可以认为：允许一系列函数被异步地调用而不会阻塞程序。

看一个代码段：

$("#Aaron").slideUp().fadeIn()

这是 jQuery 的一组动画链式序列，它的内部其实就是一组队列 Queue，所以队列和 Deferred 地位类似，是一个内部使用的基础设施。

• 当 slideUp 运行时，fadeIn 被放到 fx 队列中
• 当 slideUp 完成后，从队列中被取出运行

Queue 函数允许直接操作这个链式调用的行为，同时 Queue 可以指定队列名称获得其他能力而不局限于 fx 队列。

jQuery 提供了 2 组队列操作的 API：

• jQuery.queue/dequeue
• jQuery.fn.queue/dequeue

但是不同与普通队列定义的是：
jQuery.queue 和 jQuery.fn.queue 不仅执行出队操作返回队头元素，还会自动执行返回的队头元素。

fn 是扩展在原型上的高级API是提供给实例使用的。
.queue/.dequeue 其内部是调用的 .queue，.dequeue 静态的底层方法实现入列与出列。

动画调度

对于 jQuery 的动画的设计我们要分 2 个层面理解：

• 每一个动画效果可以看作一个独立的动画对象，每个对象都实现了针对自己这个动画的生命周期的控制。
• 动画对象与动画对象之间其实是没有直接关系，但是为了做到连续调用就需要引入一套队列机制也就是 Queue 来控制对象之间的转换的控制。

动画的源码：

//通过 queue 调度动画的之间的衔接，Animation 方法执行单个动画的封装。

animate: function(prop, speed, easing, callback) {
   doAnimation = function() {
      var anim = Animation(this, args, optall);
   };
   this.queue(optall.queue, doAnimation);
}

jQuery 在 queue 的调度上涉及了一个关键的处理：同步与异步代码同时执行，同步收集动画序列，异步调用序列，整个调用的流程：

1. 通过多个 animate 方法形成动画链，那么这个动画链其实都是会加入到 queue 队列里面;
2. 在每一次 queue 方法中会把动画数据写到队列中，然后取出队列中的第一个序列通过 dequeue 方法执行;
3. 开始执行之前写一个进程锁“inprogress”到 queue 里面，代表这个动画还在执行中，防止同个序列的多个动画重复执行，这个就是异步执行同步收集的处理方案。此时动画开始了，这里注意动画是在异步执行的同步的代码，继续调用下一个 animate，执行同样的 animate ()逻辑;
4. 但是此时问题来了，动画可能还在执行可是后续的 animate 还在继续调用，所以这个时候后面的动画代码就需要等待了（进程锁）;
5. 队列头是有一把“inprogress”进程锁的，那么这时候动画只需要加入队列，但是可以通过 inprogress 是否存在来判断是否执行;
6. 所有的 animate 方法在加入队列都是按照以上的逻辑依次执行，动画执行完毕了就会有一个结束通知，然后从 queue 取出第一个队列继续执行了，如此循环.

以上是整个动画的调度一个流程，其实都是利用队列异步的空闲然后执行同步的代码，这样在处理上是没有浪费资源的，而且精确度也是最高的。

链

把 css()、slideUp() 和 slideDown() 链接在一起。“p1” 元素首先会变为红色，然后向上滑动，再然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);