javascript - 在所有 slideDowns/slideUps 完成后执行一个函数

Question

我有这个运行 jQuery slideUp/slideDown 的 jQuery 函数。

有两个幻灯片选项会同时执行。

代码如下:

  updateView: function(){
    var falseItems = jQuery(".cjs-milestone-task-container-false");
    var trueItems = jQuery(".cjs-milestone-task-container-true");
    var linkObject = jQuery("#cjs_milestones_see_all");
    if(jQuery(MentoringModelMilestones.milestoneBlock).data("mode") == MentoringModelMilestones.viewStatus){
      linkObject.html(linkObject.data("collapsed"));
      linkObject.addClass("collapsed");
      **falseItems.slideUp();**
      MentoringModelMilestones.toggleSeeAll(falseItems.length == 0);
    }
    else{
      linkObject.html(linkObject.data("expanded"));
      linkObject.removeClass("collapsed");
      **falseItems.slideDown();**
      MentoringModelMilestones.toggleSeeAll(trueItems.length == 0);
    }
    **trueItems.slideDown();**
  },

我需要在 slideUp/slideDown 完成后调用这个函数:

  addMergeTop: function(){
    jQuery(MentoringModelMilestones.milestoneBlock).find(".cjs_milestone_container").addClass('merge-top');
    jQuery(MentoringModelMilestones.milestoneBlock).find(".cjs_milestone_container:visible").first().removeClass('merge-top');
  },

将此作为函数传递给 slideUp/slideDown 不起作用。

Answer 1

听起来您想将调用链接到 slideUp 和 slideDown:

falseItems.slideUp(400 /* duration */, function() {
    trueItems.slideDown(400, function() {
        /* perform actions that should be done after both animations complete */
        console.log("all animations done");
    });
});

您需要对 if/else 的两种情况执行类似的操作。

请注意，这将执行一个操作之后另一个。如果您希望这两个操作同时发生(或者如果您不想合并这两个调用)，那么您需要做一些更 hackier 的事情来维护共享状态。例如:

function slideAll() {
    var count = 0;
    $("#falseItems").slideUp("slow" /* duration */ , function() {
        if (2 === ++count) {
            alert("all done");
        }
    });
    $("#trueItems").slideDown("slow", function() {
        if (2 === ++count) {
            alert("all done");
        }
    });
}

slideAll();

您不必在一个 slideAll 函数中完成所有这些，但是(无论您如何做)您确实需要跟踪哪些动画已经完成在执行依赖于两者的任何代码之前。

查看第二个示例:

• http://jsfiddle.net/EKJGx/