Question

I have a problem with some jquery please see below code.

I have 2 events running. What I am trying to achieve is when the first event is completely finishes then I want to run second event.

First event

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

Second event

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

I even tried like this using status = false; but still doesn’t work.

    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);
    })
    }

If any one has any idea about this would be much appreciated.

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);
    });
});