CODEWITHSUNDEEP
jquery
Dips
Dips

Reputation: 3290

How to run an event after completely finish the previous event?

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.

Upvotes: 4

Views: 20208

Answers (7)

Anber
Anber

Reputation: 319

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

Upvotes: 5

Anber
Anber

Reputation: 319

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

Upvotes: 0

ityler22
ityler22

Reputation: 372

This may accomplish the goal in a similar way to Jquery.Deferred() but, you could also try creating a wrapper function that utilises setTimeout() to delay the second event. 

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

OR you could try Jquery.Delay()

.delay( duration [, queueName] )

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

queueNameA string containing the name of the queue. Defaults to fx, the standard effects queue.

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

Upvotes: -1

Omer Bokhari
Omer Bokhari

Reputation: 59578

this can be achieved with 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();

Upvotes: 0

SenorAmor
SenorAmor

Reputation: 3345

Look into jQuery.Deferred().

Upvotes: 0

elclanrs
elclanrs

Reputation: 94101

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

var $elms = $('div'),
    complete = false;

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

Upvotes: 0

khollenbeck
khollenbeck

Reputation: 16157

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

}

Upvotes: 0

Related Questions