CODEWITHSUNDEEP
javascriptjquery
123
123

Reputation: 794

Execute a Function after all slideDowns/slideUps are completed

I have this jQuery function which runs jQuery slideUp/slideDown.

There are two slide Options which would get executed at a time.

Here's the code:

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

I need to call this function after the slideUp/slideDown are completed:

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

Passing this as a function to slideUp/slideDown doesn't work.

Upvotes: 1

Views: 181

Answers (3)

Wayne
Wayne

Reputation: 60424

It sounds like you want to chain the calls to slideUp and 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");
    });
});

You'll need to do something similar for both cases of the if/else.

Note that this will perform one operation after the other. If you want both operations to occur simultaneously (or if you don't want to merge these two calls), then you'll need to do something hackier to maintain shared state. For example:

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

You don't have to do all of this in one slideAll function, but (however you do it) you do need to keep track of which animations have finished before you execute any code that relies on both.

See the second example in action:

Upvotes: 1

abhiklpm
abhiklpm

Reputation: 1653

You can do like this. I am giving only a logic you can modify it to your needs

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

Upvotes: 1

Seano666
Seano666

Reputation: 2238

Attach the callback function as a second parameter of your slideUp() or slideDown().

FIDDLE

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

Upvotes: 1

Related Questions