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的两种情况，你需要做类似的事情。

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

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/

Answer 2

将回调函数作为slideUp（）或slideDown（）的第二个参数附加。

FIDDLE

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

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

完成所有slideDowns / slideUps后执行一个Function

3 个答案: