jQuery 的动画的设计

对于 jQuery 的动画的设计我们要分 2 个层面理解：
一.每一个动画效果可以看作一个独立的动画对象，每个对象都实现了针对自己这个动画的生命周期的控制。
二.动画对象与动画对象之间其实是没有直接关系，但是为了做到连续调用就需要引入一套队列机制也就是 Queue 来控制对象之间的转换的控制。
三.通过 queue 调度动画的之间的衔接，Animation 方法执行单个动画的封装。
四.jQuery 在 queue 的调度上涉及了一个关键的处理：同步与异步代码同时执行，同步收集动画序列，异步调用序列，看看整个调用的流程是这样的：
4.1通过多个 animate 方法形成动画链，那么这个动画链其实都是会加入到 queue 队列里面。
4.2在每一次 queue 方法中会把动画数据写到队列中，然后取出队列中的第一个序列通过 dequeue 方法执行。
4.3开始执行之前写一个进程锁“inprogress”到 queue 里面，代表这个动画还在执行中，防止同个序列的多个动画重复执行，这个就是异步执行同步收集的处理方案。
4.4此时动画开始了，这里注意动画是在异步执行的同步的代码，继续调用下一个 animate。
4.5执行同样的 animate 方法逻辑但是此时问题来了，动画可能还在执行可是后续的 animate 还在继续调用，所以这个时候后面的动画代码就需要等待了（进程锁）。
4.6队列头是有一把“inprogress”进程锁的，那么这时候动画只需要加入队列，但是可以通过 inprogress 是否存在来判断是否执行。
4.7所有的 animate 方法在加入队列都是按照以上的逻辑依次执行，动画执行完毕了就会有一个结束通知，然后从 queue 取出第一个队列继续执行了，如此循环。
4.8以上是整个动画的调度一个流程，其实都是利用队列异步的空闲然后执行同步的代码，这样在处理上是没有浪费资源的，而且精确度也是最高的。
五.attr 和 prop 的区别介绍：
5.1对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
5.2对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。