javascript - 为什么我的 div 没有慢慢隐藏？

Question

我有一个 div，其中包含一个包裹在 div 中的表，因此父子关系，我在单击文本标题时显示和隐藏 div(表显示:最初隐藏)。我的逻辑有效，我可以让表格在单击时显示和隐藏，但是，当我传递隐藏毫秒值时，表格仍然会立即消失。这是我的结构。

var ctdown = false;
jQuery(".table-dropdown").click(function () {
    var table_height = $(".table-dropdown div").show().height()+20;
    $(".table-dropdown div").hide();
    if (ctdown) {
        jQuery(this).animate({
            height: "20px"
        }, 500, function () {
            $(".table-dropdown div").hide(1000000);
        });
    }
    else {
        jQuery(this).animate({
            height: table_height
        }, 500, function () {

        });
        jQuery(".table-dropdown div").show();
    }
    ctdown = !ctdown;
});

我输入 100000 只是为了测试它是否真的在做任何事情，但事实并非如此。有什么建议么？这里有一些我忽略的基本原则吗？谢谢!

更新! 我从帖子中标记的答案中得出答案，并且由于某种原因删除了另一位成员的答案。这是我的最终解决方案。感谢所有提供帮助的人，非常感谢!

var ctdown = false;
$(".table-dropdown").click(function () {
if (ctdown) {
    $(this).animate({
        height: "20px"
    }, 500, function () {
        $("div", this).hide().fadeOut(500);
    });
}
else {
    var table_height = $("div", this).show().height()+20;
    $("div", this).hide();
    $(this).animate({
        height: table_height
    }, 500, function () {

    });
    $("div", this).show();
}
ctdown = !ctdown;
});

Answer 1

您可以使用 fadeIn或 fadeOut为此。

在您的代码中，这可能是:

var ctdown = false;

jQuery(".table-dropdown").click(function () {

    var table_height = $(".table-dropdown div").show().fadeIn(500).height()+20;
    $(".table-dropdown div").hide().fadeOut(500);

        if (ctdown) {
            jQuery(this).animate({
                height: "20px"
            }, 500, function () {
        $(".table-dropdown div").hide().fadeOut(500);
            });
        }
        else {
            jQuery(this).animate({
                height: table_height
            }, 500, function () {

            });
        jQuery(".table-dropdown div").show().fadeIn(500);
        }
        ctdown = !ctdown;
    });