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。

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