jquery - 完成上一个事件后如何继续举办事件？

Question

我在使用某些 jquery 时遇到问题，请参阅下面的代码。

我有 2 个事件正在进行。我想要实现的是，当第一个事件完全完成时，我想运行第二个事件。

第一次事件

$("#brand div").each(function(e) {
$(this).delay(600*e).fadeTo('slow',1)
})

第二次事件

$(".b-circle-image a").each(function(ev) {
$(this).delay(600*ev).fadeTo('slow',1);
})

我什至尝试使用 status = false; 但仍然不起作用。

    var checkStatus  = true;
    $("#brand div").each(function(e) {//Display segments in order
      $(this).delay(600*e).fadeTo('slow',1)
      checkStatus = false;
    })
    if(!checkStatus==false){
      $(".b-circle-image").show();
      $(".b-circle-image a").each(function(ev) {//Display circle image in order
      $(this).delay(600*ev).fadeTo('slow',1);
    })
    }

如果有人对此有任何想法，我们将不胜感激。

Answer 1

// You can create deferred object for each fadeTo and resolve it on complete animation callback.
var firstEvent = $("#brand div").map(function(i, el) {
    var dfd = $.Deferred();
    $(el).delay(600*i).fadeTo('slow', 0, function() {
        dfd.resolve();
    })
    return dfd;
});
// Then use $.when function (http://api.jquery.com/jQuery.when/)
$.when.apply(this, firstEvent).done(function() {
    $(".b-circle-image a").each(function(i) {
        $(this).delay(600*i).fadeTo('slow',0);
    });
});