Question

I’m tryin to call a own function and wait until its finishes. After the transitions end I want to start the next function.
please have a look in my jsfiddle http://jsfiddle.net/hrm6w/

The console.log(“upper finished”) should start after console.log(“promise finished”) and all animations have ended.

And after all animations in the each-Object have ended I want to start the next actions(functions).

I think the promise()-function is all I need, but I just doesn’t get this working.

Any help would be appreciated.

Answer 1

After playing a bit it seems you need to return the promise from the transition. I modified it a bit but has the same result.

This article helped explain some of the concepts: http://hermanradtke.com/2011/05/12/managing-multiple-jquery-promises.html

Demo: http://jsfiddle.net/lucuma/hrm6w/5/

    (function($) {
    //Transition Out
    $.fn.ajaxTransitionOut = function() {

        var $animators = $('.animate', this);
        $animators.each(function() {
            $(this).animate({
            left: 1000,
            opacity: 0
        }, 400);
        console.log('animating');
                        });
        return $animators.promise().done(function() {
            console.log('promise finished');
        });

    };

})(jQuery);

$(document).ready(function() {
    console.log('starting');
    $.when($('#content').ajaxTransitionOut()).done(function() {
        console.log('upper finished');
    });
    console.log('ending');

});​