jquery animate 详解

一.前言

继上一篇文章jquery stop的探索以后，咱们继续对jquery动画animate的研究。

从stop给出参数咱们就知道，它适合你去当即中止或者当即结束当前动画，清除或者继续非当前的动画队列。

注意，stop控制的只是该dom对象的动画，没法去控制不一样dom的动画执行顺序产生的积累，动画回调也没法避免这种积累，只能设置全局的动画状态参数来控制。

因而可知，stop函数是不须要一个动画队列完完整整地完成的。

然而，不少时候，咱们须要一个动画队列执行完成，即使有其它的很是规操做，也只是让这些很是规的操做显得无效。

好比图片轮播，当你快速点击前进或者后退按钮时，轮播的图片不该当在其动画效果还未展现完毕时，就切换到其它位置。它须要展现完成一个图片轮播后，再去响应某个有效的点击，而不是响应每一个点击。

而有效的点击则是指：在一个动画完成后（完成一个动画队列的总的duration）的最近一次的点击。

所以，从这个需求来看，jquery的stop函数并不是是咱们须要的（它适合常见的下拉菜单显示隐藏效果）。

在研究以前，我先声明下，我是基于jquery1.8版本以上的。

----------------------------------------------------------------------------------

二.动画执行顺序

动画都是有执行顺序的，好比，两个动画一块儿执行，或者一个动画执行完后，再执行另外一个动画。

好，咱们来看一下示例：

1.同步执行（并行）

注意，同步执行动画是针对不一样的动画对象而言，同一动画对象（DOM）实际上是串行的。很是合乎逻辑的。

2.按次序执行（串行）

注意示例1中的js代码，不管你用链式写法($('.box1').animate({left:'+=100px'}).silbings('.box2').animate({left:'+=100px'}))，仍是我那么分开写两个动画，它们是一块儿执行的，也就是并行执行。

而为了有前后顺序，你须要把次动画放在前一个动画的回调函数中。

固然，当动画队列太多的时候，你须要queue函数和dequeue函数来优化动画队列代码。详见：http://mrthink.net/jqueryapi-queue-dequeue/

可是，使用该技巧时应当注意，若是须要某个事件来重复执行该动画队列，这种方法就失效了，它只能执行一次。示例：

三.动画完成问题

前面给出的示例看似没有什么问题，都按照咱们的预期正确执行了。可是，当你频繁点击go按钮时，问题就出现了。

对于示例1来讲，若是咱们要等待动画队列执行完毕后再执行，那么这个问题比较容易解决。

我加入了一个全局的动画标识animateFlag，用于判断动画是否执行完毕。可是，这段代码实在是丑陋无比。为了让动画完整地执行，咱们却把代码拆分地有些支离破碎，一点都不优雅。

对于示例1，由于动画是并行执行，因此，只须要在其中一个动画的完成回调函数中进行动画完成动画标识animateFlag的设置便可。这时，你再快速点击go按钮（在一个duration时间范围内），动画没有积累了，只执行一次，等到执行完后，才响应完成后的第一个点击事件。

那么对于示例2的串行执行动画，咱们要让其完整执行后再响应go按钮的点击事件，该怎么作呢？

来看一个示例：

以上技巧解决串行动画完成问题能够说是屡试不爽啊！

可是，我遇到了一个比较奇葩的问题，以上的技巧有些失效了。animate使用opacity属性来显示和隐藏动画时，就会产生bug。

这个问题，我也不知道如何解决。