等待循環中的每個動畫完成之前運行下一個

Question

我期待在計數功能上運行一個延遲，所以每當計數器的完成類名完成後，它會然後運行計數，每當前一個已完成等。

$('.counter').each(function() { 
    var $this = $(this), 
     countTo = $this.attr('data-count'); 

    $({ countNum: $this.text()}).animate({ 
     countNum: countTo 
    }, 
    { 
     duration: 4000, 
     easing:'linear', 
     step: function() { 
      $this.text(Math.floor(this.countNum)); 
     }, 
     complete: function() { 
      $this.text(this.countNum); 
     } 
    }); 
}); 

Answer 1

這不與each循環一起使用。你必須使用complete回調，由你自己做回調，因爲動畫是異步的。

我會使用遞歸自執行函數。很簡單，完成後纔開始下一個。

var elements = $('.counter'); 
var current = 0; 

(function next() { 
    var $this = elements.eq(current), 
     countTo = $this.attr('data-count'); 

    $({countNum: $this.text()}).animate({countNum: countTo}, { 
     duration: 4000, 
     easing: 'linear', 
     step: function() { 
      $this.text(Math.floor(this.countNum)); 
     }, 
     complete: function() { 
      $this.text(this.countNum); 

      if((++current) < elements.length) { 
       next(); 
      } 
     } 
    }); 
})();