Question

I have created a quick jsfiddle here showing it not working.

The problem I have is with the slide up. I want it to work so that it only sets the width to 0 after the slideup has finished. The obvious callback function does not seem to be getting called after the slideup has finished.

I would like it to work like this:

1. Shows the red box by sliding down and increasing the width together.

2. Click again and the box slides up then sets the width the 0. So that if the user clicks the button again the first animation would appear the same.

   var $foo = $(“#elm”);

   $("#btn").toggle(function() {
       showDropDown();
   }, function() {
       hideDropDown();
   });
   
   function showDropDown(){
       $foo.slideDown({duration:500, queue:false}).animate({"width": 400}, 250);
   }
   
   function hideDropDown(){
       $foo.slideUp({duration:800, queue:false},function(){
           $foo.css({"width": 0});
       });            
   }
   

UPDATE:
The strange thing is that if I add a alert() into the callback function for slidedown it never gets called.

Answer 1

Edit: Sorry for the first answer, didn’t pay attention.

The problem is that the callback is not executed, because you don’t give the parameters according to the API, and the callback is not “wired” in.

Instead, you can use the promise().done(...) combination to achieve the objective you wanted.

So, you should modify your hideDropDown method as follows:

function hideDropDown(){
    $foo.slideUp({duration:800, queue:false}).promise().done(function(){
        $foo.css("width", "0px");
    });            
}

From the jQuery docs:

“The .promise() method returns a dynamically generated Promise that is resolved once all actions of a certain type bound to the collection, queued or not, have ended.”