在所有 slideDowns/slideUps 完成后执行一个函数答案

【问题标题】：Execute a Function after all slideDowns/slideUps are completed在所有 slideDowns/slideUps 完成后执行一个函数
【发布时间】：2014-01-16 05:55:06
【问题描述】：

我有这个运行 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 不起作用。

【问题讨论】：

标签： javascript jquery

【解决方案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 的两种情况执行类似的操作。

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

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/

【讨论】：

这是唯一可行的方法。我希望在不合并我的 slideUp 和 slideDown 调用的情况下找到一个解决方案。
另一种方法是保持某种状态。请参阅我的更新答案。
关于您的编辑：您需要将 reference 传递给 slideUp/Down 的第二个参数中的函数。不要在那里调用函数。
即使这个 hack 也行不通。该函数在计数未达到 2 的情况下完成。我需要通过使其达到 2 在此函数中执行某些操作。
它确实工作。请参阅链接的小提琴 :) 说真的，如果它仍然失败，那么您还有其他问题。

【解决方案2】：

将回调函数附加为 slideUp() 或 slideDown() 的第二个参数。

FIDDLE

function doSlide(){
  $('.slider').slideUp(1000,function(){
      alert('done sliding');
  })
}

【讨论】：

【解决方案3】：

你可以这样做。我只给出一个逻辑，您可以根据需要对其进行修改

//place this at top
var falseItemsComplete = trueItems = false;

//modify below things in your code
falseItems.slideUp('fast', function() {
  falseItemsComplete  = true;//slideup for falseItems completed
  checkCompletedStatus();
});

trueItems.slideDown('fast', function() {
  trueItemsComplete  = true;//slideup for trueItems completed
  checkCompletedStatus();
});

function checkCompletedStatus(){
  if(falseItemsComplete  && trueItemsComplete ){
     //both animations complete
     alert(1)
  }
}

【讨论】：