jQuery多個動畫和他們的進展跟蹤

Question

我正在寫一個腳本與許多動畫並行和以不同的順序發生。根據網頁上點擊的內容使用特定的一組動畫。這些功能被重複使用，並且每次都不以相同的順序出現。

問題出現在用戶點擊另一個元素而不讓第一組動畫完成時。在這種類型的實例中，腳本中斷並且無法按預期運行。這顯然是因爲進展並未完成，另一組動畫開始執行。

我的問題是，是否有任何實踐來確定當前是否正在運行動畫，以防止在當前設置完成之前執行另一組動畫。

Answer 1

您可以使用:animated選擇：

if ($("yourSelector:animated").length > 0) { 
    // Some of the elements matching 'yourSelector' are still being animated. 
} 

或者，你可以調用finish()開始一個新的動畫迫使當前立即完成前：

$("yourElement").finish().animate({ 
    // The properties to animate... 
}); 

Answer 2

如果你只是想請確保在開始新動畫之前與特定元素關聯的動畫通常完成，您可以使用.queue()函數。 See my example on jsFiddle。

$(function() { 
    $(".clicker").on("click", function() { 
     var self = $(this); 
     self.queue(function(next) { 
      self.animate({left:"+=100"}, 1000); // Replace with your animation 
      next(); 
     }); 
    }); 
}); 

Read more about the queue function on api.jquery.com。

Answer 3

jQuery還有一個隱藏的暴露變量，名爲$.timers，其中包含當前所有動畫數組的動畫/等。哪種速度方式非常快速，在性能方面，您不希望循環瀏覽$('*').is(':animated')，以測試頁面上是否有任何內容正在移動。

我創建了一個小函數，它遍歷一段時間的間隔，直到它們全部完成，然後執行回調函數。

function isPageAnimated (_func) {  
    var testAnimationInterval = setInterval(function() { 
     if ($.timers.length === 0) { // any page animations finished 
      clearInterval(testAnimationInterval); 
      _func(); // callback function 
     } 
    }, 100); 
}