切换不执行

Question

我有一个点击功能，正在执行，因为fadeToggles的工作。但是我试图进行动画制作的div＃叠加源并不是动画。我将它设置为0px的高度，然后将其设置为480px。动画本身起作用，我已经在切换功能之外对其进行了测试。但不知何故，切换功能不会被执行。

$("#button-up").click(function(){ 
    $("#overlay-sources").toggle(
     function() 
     { 
      $(this).animate({height: "480px"}, 500); 
     }, 
     function() 
     { 
      $(this).animate({height: "0px"}, 500); 
     }); 

    $("#overlay-sources").fadeToggle('fast'); 
    $("#blackout").fadeToggle('fast'); 
}); 

Answer 1

这就是我所需要的。

$("#button-up").toggle(
    function() 
    { 
     $("#overlay-sources").animate({top: "141px"}, 500); 
     $("#blackout").fadeToggle('fast'); 
    }, 
    function() 
    { 
     $("#overlay-sources").animate({top: "690px"}, 500); 
     $("#blackout").fadeToggle('fast'); 
    } 
); 

Answer 2

如果你不反对jQueryUI的，或者已经包含它，整个顶部：

$("#overlay-sources").toggle(
     function() 
     { 
      $(this).animate({height: "480px"}, 500); 
     }, 
     function() 
     { 
      $(this).animate({height: "0px"}, 500); 
     }); 

变为：

$("#overlay-sources").slideToggle(500);

但是不要CSS高度为0，简单地display:none，并且该函数将处理高度动画。

编辑

对不起，我错了。它看起来像slideToggle是jQuery核心库的一部分，并不需要jQuery UI