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.

where is an ajax call being made? jw and what is the advantage of using `$.fn.ajaxTransitionOut`? — Ryan, Jun 13 '12 at 00:48
the AJAX-Call is outside this function and I tried to implement the $.fn.ajaxTransitionOut as universal function to animate elements depending on the given data-transin and data-transout. I wanted to rewrite https://gist.github.com/854622 to animate selected elements, not only to fadIn and fadeOut — felixaburg, Jun 13 '12 at 00:59
@felixaburg if the answer helped you I'd appreciate you clicking the checkmark (next to the up vote) to accept the answer for future people that may have similar questions. You should also go back to the other three questions that you have and accept those answers that helped you. — lucuma, Jun 13 '12 at 01:53

lucuma · Accepted Answer · 2014-03-18T17:47:08.850

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

});

@Hogan, it is a good thing I've included the code and a link to a working jsfiddle in the answer. Anyways I've fixed the link to the external blog. — lucuma, Mar 18 '14 at 17:47

Beetroot-Beetroot · Answer 2 · 2012-06-13T02:12:42.870

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.

that worked for me too before, but the problem was the each loop. Thank you. — felixaburg, Jun 13 '12 at 08:22
The presence of `.each()` in the plugin is academic. Without it, the nett effect is identical because jQuery implements an internal `each()` to loop through the selected elements. The important thing is that you can keep the plugin nice and simple by returning the jQuery object, with the additional advantage that the plugin becomes chainable for other purposes - see [here](http://jsfiddle.net/hrm6w/9/). For even greater simplicity, and the same nett effect, then avoid a plugin completely - see [here](http://jsfiddle.net/hrm6w/10/). — Beetroot-Beetroot, Jun 13 '12 at 09:38

jQuery promise in function with each()

2 Answers2

Linked