Question

Here is the problem: jsFiddle

What I want is the yellow height to be changed from 60px to 20px only AFTER it was slided down (it slides on click). How to fix?

 $(document).ready(function ()
   {
     $('#slide-link').click(function(){
       $(this).animate({ top: $(window).height()-40 },5000)
       $('#sliderWrapper').stop().hide("slide", { direction:"down" }, 5000); 
       $('#slide-link').height(20)
      //I want 20px to become after #sliderWrapper slided down, not on click
      //That's why I put $('#slide-link').height(20) as the last line
      // But it triggers asap. How to fix?
    })
})​

As far as I see, $('#slide-link').height(20) does NOT wait until $('#sliderWrapper').stop().hide("slide", { direction:"down" }, 5000);
is finished.

P.S. $('#slide-link').delay(5000).height(20) does NOT help either. Why? How to fix?

Answer 1

.delay() only affects functions that use the animation queue. However, .height() is not animation-related at all and thus doesn’t use that queue.

What you want is the callback of .hide() which triggers after the animation has completed:

$('#sliderWrapper').stop().hide("slide", {
    direction: "down"
}, 5000, function() {
    $('#slide-link').height(20)
});

Demo: http://jsfiddle.net/ThiefMaster/DDeqU/3/