Question

我正在尝试动画制作一个接一个的动画。

我这样做是这样的：

$(class).animate(
    {something},
    {
        duration: 1000,
        complete: function(){
                      $(class).animate(
                          {something},
                          {
                              duration: 1000,
                              complete:  function(){
                              // More to animate when previous animation is done
                          }
                  });
    }
});

到目前为止，这种方法运作良好。我的问题如下：

要触发此动画链，我点击了一个元素。单击该元素时，会出现一个变量“正在进行”，因为无法重新点击该元素，因为尚未到达动画的结尾。

这一系列动画中最深的动画如下。

complete: function(){
    $(few divs).each(function(){
        $(this).delay(delay).animate(
            {"opacity": 1},
            {
                duration:2000,
                complete: function(){
                      console.log(i + " finished"); //
                      if(i == 2){ // 3 divs
                          ongoing = false; // All the animations are finished, allowed to reclick
                      }
                }
                delay += 2000;
            });
}

这个问题是它显示了3次0,1,2。

0 finished
1 finished
2 finished
0 finished
1 finished
2 finished
0 finished
1 finished
2 finished

然后我尝试了这个：

complete: function(){
    selected = text;

    $(few divs).each(function(i){
        $(this).delay(delay).animate({"opacity": 1}, 2000);
        delay += 2000;
    }).promise().done(function(){ // All each's are finished
        ongoing = false;
        console.log("finished");
    });
}

在这个例子中，还有一个带有“完成”的无限循环......

我的代码究竟发生了什么，为什么它不起作用？

Answer 1

}).promise().done(function(){ // all each's are finished

这是错误的 - 它总是立即执行。

您需要将animate()的延迟对象推送到数组中;请考虑以下示例。

var promises = [];
$(few divs).each(function(i){ 
    promises.push(
        $(this)
            .delay(i * 2000)
            .animate({
                "opacity": 1
            }, 2000)
    );
})
$.when.apply($, promises).done(function() {});

Answer 2

＆＃34>增加延迟＆＃34;方法实际上给出了一组单独的动画，每个动画具有预测的开始时间，以给出端到端的序列效果 - 可能存在定时错误。

更好的方法是通过构建.then()链来创建具有保证timimg的真实动画序列。

complete:  function() {
    var promise = $.when();
    $(few divs).each(function() {
        promise = promise.then(function() {
            return $(this).animate({'opacity': 1}, 2000).promise();
        });
    });
    promise.done(function() { // All animates are complete
        ongoing = false;
        console.log('finished');
    });
}

或者，使用Array .reduce()方法稍微更紧凑：

complete: function() {
    $(few divs).get().reduce(function(promise, el) {
        return promise.then(function() {
            return $(el).animate({'opacity': 1}, 2000).promise();
        });
    }, $.when()).done(function() { // All animates are complete
        ongoing = false;
        console.log('finished');
    });
}

在jQuery中设置完整的无限循环

2 个答案: