故障與創建jQuery的動畫序列

Question

我想執行的進度條動畫序列：

function animateProgress() { 
    var params = [{from: 50, to: 100}, {from: 0, to: 100}, {from: 0, to: 50}]; 
    animateProgressStep(params, 0); 
} 

function animateProgressStep(params, i) { 
    $(".progress").width(params[i].from).animate({width: params[i].to}, { 
     duration: 2000, 
     complete: function() { 
      if(i + 1 < params.length) { 
       animateProgressStep(params, i + 1); 
      } 
     } 
    }); 
} 

這工作如果頁面上的單杆，但如果有很多，它打破的第二次迭代，因爲complete回調被調用多次，因爲頁面上有進度條元素。

什麼是解決方案？

可以用它在這裏玩：http://jsfiddle.net/TythE/1/

Answer 1

我結束了起始動畫序列每個元素，我覺得它是最乾淨和最簡單的解決方案：

function animateProgress() { 
    var params = [{from: 50, to: 100}, {from: 0, to: 100}, {from: 0, to: 50}]; 
    $(".progress-overlay").each(function(){ 
     animateProgressStep($(this), params, 0); 
    }); 
} 

function animateProgressStep(el, params, i) { 
    el.width(params[i].from).animate({width: params[i].to}, { 
     duration: 2000, 
     complete: function() { 
      if(i + 1 < params.length) { 
       animateProgressStep(el, params, i + 1); 
      } 
     } 
    }); 
} 

Answer 2

我希望我正確理解你：

的animate方法是在所有具有類progress元素運行。爲什麼不使用ID來代替只在類上選擇？

function animateProgressStep(id, params, i) { 
    $("#" + id).width(params[i].from).animate({width: params[i].to}, { 
     duration: 2000, 
     complete: function() { 
      if(i + 1 < params.length) { 
       animateProgressStep(id, params, i + 1); 
      } 
     } 
    }); 
} 

Answer 3

如果我沒有誤會你，你可以一個finished屬性添加到每個PARAM，使其始終繼續到下一個只有一次：

function animateProgress() { 
    var params = [{from: 50, to: 100}, {from: 0, to: 100}, {from: 0, to: 50}]; 
    animateProgressStep(params, 0); 
} 

function animateProgressStep(params, i) { 
    $(".progress").width(params[i].from).animate({width: params[i].to}, { 
     duration: 2000, 
     complete: function() { 
      if(i + 1 < params.length && !params[i].finished) { 
       params[i].finished = true; 
       animateProgressStep(params, i + 1); 
      } 
     } 
    }); 
}