jQuery的動畫隊列

Question

我有一些span標籤：

<span data-w="560"></span> 
<span data-w="340"></span> 
<span data-w="120"></span> 

我有一個jQuery代碼以動畫每個跨度達到目標寬度設定在礦井數據-W屬性：

$(document).ready(function(){ 

    $('span').each(function() { 

     $(this).animate({width: $(this).attr('data-w') + 'px'}, 1000); 

    }); 

}); 

這裏的一切作品正好。

現在我想讓每個跨度單獨生成動畫，而不是所有跨度在一起。

怎麼辦？可能與隊列（）？怎麼樣？

謝謝。

Answer 1

Mayby您可以創建自己的隊列：

var spanW_loop = 0; 
var spanW_size = jQuery('#spanW span[data-w]').length; 

    function animateSpanW() { 
    var spanWidth = jQuery('#spanW').children('span[data-w]').eq(spanW_loop).attr('data-w'); 
     jQuery('#spanW').children('span[data-w]').eq(spanW_loop).animate({width: spanWidth + 'px'}, 1000, function() { 
      spanW_loop += 1; 
      if(spanW_loop < spanW_size) { 
       animateSpanW(); 
      } 
     }); 
    } 

animateSpanW();