CODEWITHSUNDEEP
javascriptjqueryanimation
Benjo
Benjo

Reputation: 189

Callback when all sub animations complete

I have a jQuery animate event, with other animations within the callback event of this animation.

I need to be able to detect when everything has finished doing what it is doing, and then call a function at that time.

As there are a few different outcomes as to what animations take place I am struggling to get it working as I need, and the above solution would clear it up completely. 

jQuery('.A_Item').stop().animate(Properties, 250, function () {

        var el = jQuery(sID);
        if (!IsOpen) {

            jQuery(el).stop(true, true).animateAuto("height", 250,
                function () {

                    jQuery('body').stop().animate({ scrollTop: oButton.offset().top }, 250, function () {

                        if (IsSubItem) {

                            jQuery(el).parent().stop().animateAuto("height", 500,
                                function () {
                                    var sButtonID = sID.replace('.A_Item', '').replace('#', '');
                                    jQuery('body').stop().animate({ scrollTop: jQuery('.Button[item="' + sButtonID + '"]').offset().top }, 500);
                                });

                        }

                    });
                }
            );

        }


    });

Upvotes: 0

Views: 48

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388416

You will need to place the callback invocation code in multiple places to handle those cases.

Assuming a reference callback refers to the callback method to be invokded

function callback() {
    //callback logic goes here
}

jQuery('.A_Item').stop().animate(Properties, 250, function () {
    var el = jQuery(sID);
    if (!IsOpen) {

        jQuery(el).stop(true, true).animateAuto("height", 250, function () {

            jQuery('body').stop().animate({
                scrollTop: oButton.offset().top
            }, 250, function () {

                if (IsSubItem) {

                    jQuery(el).parent().stop().animateAuto("height", 500, function () {
                        var sButtonID = sID.replace('.A_Item', '').replace('#', '');
                        jQuery('body').stop().animate({
                            scrollTop: jQuery('.Button[item="' + sButtonID + '"]').offset().top
                        }, 500, callback); //if all animations are enabled then call the callback
                    });

                } else {
                    //if the IsSubItem is not set call
                    callback();
                }

            });
        });

    } else {
        //if the open flag is set call the callback
        callback();
    }
});

Upvotes: 1

guest271314
guest271314

Reputation: 1

If each if condition returns true could use complete callback of last nested .animate() at

jQuery('body').stop()
.animate(
  { scrollTop: jQuery('.Button[item="' + sButtonID + '"]').offset().top }
  , 500, function() {
  // do stuff
});

Upvotes: 0

Related Questions