I was wondering if the is any way to wait until the fadeOut is complete before the fadeIn commences, as when i run the following code, it places one div under the other, the
I am using jQuery's Queues - allows you to put anything on the fx
stack (and canceling works with it as well, no need for a finalizing .promise()
):
$('.sidebarform').fadeOut('slow').queue(function(done) {
$('.sidebarsuccess').fadeIn('slow');
done();
}) .... other chained effects
if no further effects are used, done()
can be removed. .queue()
will hold the stack until done()
is called - useful for async execution. It will not wait for fadeIn.
This will force the fx
stack to wait for fadeIn as well (just as an additional example):
$('.sidebarform').fadeOut('slow').queue(function(done) {
$('.sidebarsuccess').fadeIn('slow', done);
}) .... other chained effects kicking in after fadeIn
The queue will only continue, when the fadeIn completes and calls done as its callback - which is the queues one. The stack sees this as one entry.