How to start an event after the complete completion of the previous event

Question

Hi guys, I have a problem with some jquery, please see the code below. I have 2 events. What I'm trying to achieve is when the first event completely ends, then I want to trigger the 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 using this with status = false; but still not working.

  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 anyone has any ideas about this, we will be very grateful.

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

Answer 2

You can try something like this:

First Event:

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

Second event:

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

Answer 3

I think your approach is a good idea, but you need to set the status to true only when each cycle ends last. You can do something like this:

 var $elms = $('div'), complete = false; $elms.each(function (idx, value) { //... if (++idx === $elms.length) { complete = true; } //... }); 

Answer 4

Take a look at jQuery.Deferred() .

Answer 5

this can be achieved using a jQuery deferred object:

 // initialize the deferred object var deferred = $.Deferred(); // queue your events deferred.done(myFirstEvent, mySecondEvent); // resolve the deferred object to trigger events deferred.resolve(); 

Answer 6

This may achieve the goal similar to Jquery.Deferred (), but you can also try creating a wrapper function that uses setTimeout () to delay the second event.

 setTimeout(function() { function mySecondEvent(); }, 15); 

OR , you can try Jquery.Delay ()

 .delay( duration [, queueName] ) 

durationAn integer indicating the number of milliseconds to delay the execution of the next element in the queue.

queueNameA string containing the queue name. By default, fx is the standard effects queue.

More details here: http://api.jquery.com/delay/

Answer 7

 var queue = []; $("#brand div").each(function() { queue.push( function(i) { $(this).delay(600*i).fadeTo('slow',1) }.bind(this) ); }); $(".b-circle-image a").each(function(ev) { queue.push( function(i) { $(this).delay(600*i).fadeTo('slow',1) }.bind(this) ); }); queue.map(function(el, i) { el(i); })