jquery - jQuery：在 jQuery hide() 完成后进行更改

Question

这是问题所在：jsFiddle

我想要的是黄色高度仅在向下滑动后才从 60px 更改为 20px （单击时滑动）。怎么修？

 $(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?
    })
})​

据我所知，$('#slide-link').height(20)不要等到$('#sliderWrapper').stop().hide("slide", { direction:"down" }, 5000); 完成。

PS$('#slide-link').delay(5000).height(20)也无济于事。为什么？怎么修？

Answer 1

.delay()仅影响使用动画队列的函数。但是，.height()根本与动画无关，因此不使用该队列。

您想要的是.hide()动画完成后触发的回调：

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

演示：http: //jsfiddle.net/ThiefMaster/DDeqU/3/