jQuery promise in function with each()

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

});​

Answer 2

I think it's as simple as this :

(function($) {
    $.fn.ajaxTransitionOut = function() {
        return this.find('.animate').each(function() {
            $(this).animate({
                left: 500,
                opacity: 0
            }, 4000);
        });
    };
})(jQuery);
$.when($('#content').ajaxTransitionOut()).done(function() {
    $('html').css('backgroundColor','#999');
});

Fiddle - http://jsfiddle.net/hrm6w/8/

You will see I changed the constants and the terminal action to better observe the process.

I confess I don't fully understand why this works but it appears that a composite promise for all selected elements is implicit in the jQuery object returned by the plugin (and thus made available to .done() down the method chain).

I expect this only works because we are dealing with animations and a promise's default type is 'fx' (see documentation for .promise()).

Edit:

You can alternatively drop .when() and generate an explicit promise with .promise() in the method chain like this :

$('#content').ajaxTransitionOut().promise().done(function() {
    $('html').css('backgroundColor','#999');
});

The plugin remains the same.