当所有子动画完成时回调

Question

我有一个jQuery动画事件，与此动画的回调事件中的其他动画。

我需要能够检测到什么时候所有东西都完成了它正在做的事情，然后在那个时候调用一个函数。

由于动画发生了一些不同的结果，我正在努力使它按照我的需要工作，而上述解决方案将完全清除它。

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

    });

Answer 1

您需要将回调调用代码放置在多个位置来处理这些情况。

假设引用callback指向要调用的回调方法

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();
    }
});

Answer 2

如果每个if条件返回true，则可以使用complete回调最后嵌套的.animate()

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