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。

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

posted @ 2013-07-24 12:16  xmlovecss  阅读(1578)  评论(0编辑  收藏  举报