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

如何使用JQuery顺序执行多个动画

2 个答案: