CODEWITHSUNDEEP
jqueryanimation
CaptSaltyJack
CaptSaltyJack

Reputation: 16055

Synchronous animations in jQuery, not using callbacks?

I can't use callbacks because I have a scenario like this (pseudo-code):

$('.box').on('click', function() {
    $('.expanded-box').animate({
        // shrink it
    });

    $(this).animate({
        // grow it
        $(this).addClass('expanded-box');
    });
});

I can't put the expansion animation within the callback for the expanded-box growth animation because it may not always happen. But I need the second animation to wait till the previous one is done. How can I do this?

Upvotes: 5

Views: 2766

Answers (2)

Frédéric Hamidi
Frédéric Hamidi

Reputation: 263047

Since jQuery 1.6, you can use promise() to obtain a Promise object that will be resolved when all animations on a given element have completed. In addition, the documentation says:

Using .promise() on a collection with no active animation returns a resolved Promise.

Therefore, it's well-suited to your use case, and you can write:

$('.box').on('click', function() {
    var $this = $(this);
    $('.expanded-box').animate({
        // shrink it
    }).promise().done(function() {
        $this.animate({
            // grow it
        }).addClass('expanded-box');
    });
});

Upvotes: 7

nnnnnn
nnnnnn

Reputation: 150070

You can encapsulate the second animation's code in a function and then call that function from the callback of the first animation or call it if the first animation doesn't happen. Assuming the idea is to shrink some other control that had the "expanded-box" class from a previous click:

$('.box').on('click', function() {
    var $this = $(this),
        $exp = $(".expanded-box");

    function grow() {
       $this.animate({
           width: "200px", height: "100px"
       }).addClass('expanded-box');
    }

    if ($exp.length > 0) {
       $exp.animate({
           width: "100px", height: "50px"
       }, grow).removeClass("expanded-box");
    } else {
       grow();
    }        
});​

Demo: http://jsfiddle.net/PXddm/

Upvotes: 1

Related Questions