javascript - 未执行切换

Question

我有一个正在执行的点击功能，因为 fadeToggles 工作。但是我试图制作动画的 div#overlay-sources 不是动画的。我已经将它的高度设置为 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

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

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

变成：

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

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

编辑

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

Answer 2

这就是我需要的。

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