如何用jQuery連續執行幾個動畫

Question

我試圖重新創建一個動畫（一些div滑動）N次，一個在前一個動畫之後。

到目前爲止，我有這樣的：

n_times = index; 
for (var i = 0; i < n_times; i++) { 
    $(".left").click(); 
} 

，並在此單擊事件觸發：

$(".left").click(function (e) { 
    e.preventDefault(); 
    index--; 
    column_n--; 
    var total = parseInt($('#slides').css('margin-left').split('px')[0]) + 1150; 
    $('#slides').stop().animate({ marginLeft: total + 'px' }, 850); 
}); 

然而，我的第一個for循環不等待每一個動畫結束開始下一個電話。

如何實現這一目標？

Answer 1

我只想讓遞歸：

var times = 5; // or whatever you want 
var total = parseInt($('#slides').css('margin-left').split('px')[0]) + 1150; 

slide(0); 

function slide(intv) 
{ 
    if(intv <= times) 
    { 
     $('#slides').stop().animate({ marginLeft: total + 'px' }, 850, function(){ 
      intv += 1; 
      slide(intv); 
     }); 
    } 
} 

Answer 2

你不能做一個for循環，但這樣的事情：

function animateNTimes(n) { 
var isCanceled = false, i = 0; 

    (function iteration(){ 

     if(isCanceled || i >= n) { 
     return; 
     } 

    i++; 
    var total = parseInt($('#slides').css('margin-left').split('px')[0]) + 1150; 
    $('#slides').animate({ marginLeft: total + 'px' }, 850, "swing", iteration); 
    })(); 

    return { 
     cancel: function(){ 
     $('#slides').stop() 
     isCanceled = true; 
     } 
    }; 

} 

你可以這樣稱呼它：

var myAnimation = animateNTimes(5); 

並且如果你想在停止它時去做它，你可以做

myAnimation.cancel(); 

jsfiddle