Javascript 切换isn'；不执行

我有一个正在执行的单击功能，因为fadeToggles可以工作。但是我试图设置动画的div#overlay源没有设置动画。我已经将它的高度设置为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');
});

---

如果您不反对jQueryUI，或者已经包含它，那么整个顶部部分：

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

变成：

$（“#覆盖源”）。滑动切换（500）

但不要将高度设置为0，只需显示：无，该函数将处理高度动画

编辑

对不起，我弄错了。看起来
slideToggle
是jQuery核心库的一部分，不需要jqueryui
这就是我需要的

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

谢谢有没有一种方法可以让它向下滑动而不是向上滑动？在哪方面？默认情况下，它向下滑动以显示，向上滑动以隐藏是的，我需要相反的方式，所以向下滑动以隐藏，向上滑动以显示。