CODEWITHSUNDEEP
javascriptjquery
Ggicci
Ggicci

Reputation: 825

Wait for an animation to finish

I know how to use a callback to wait for an animation to finish when I process the animation directly, but if the animation is called from another function, then how can I do it?

For example, I have an element, #btn, and an animation is triggered when I click it: 

$('#btn').click(function() {
   //bla bla...
});

Then I call it using $('#btn').click(); in another function:

function foo() {
   $('#btn').click();
   $('#avatar').fadeIn('slow'); //-->I want this animation to run after #btn has finished, but I don't know how to use a callback for this situation...
}

Upvotes: 1

Views: 726

Answers (2)

Ram
Ram

Reputation: 144659

You can use promise and done methods:

$('#btn').trigger('click').promise().done(function(){
     $('#avatar').fadeIn('slow');
});

http://jsfiddle.net/FsyBZ/

Note that it only works when you select the element that currently is getting animated. the best option is using animate callback function.

$('#elem').animate({}, duration, function(){
   // ...
})

Upvotes: 2

A. Wolff
A. Wolff

Reputation: 74420

You could try something like this if at time there is only one animetion on page:

function foo() {
   $('#btn').click();
   $(":animated").promise().done(function() {
      $('#avatar').fadeIn('slow');
    });
}

Upvotes: 2

Related Questions