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。

這個問題，我也不知道如何解決。