如何用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