为什么我的div不能慢慢隐藏？

Question

I have a div containing a table wrapped in a div so parent child relation, I am displaying and hiding the div on click of a text title(table display:hidden initially). My logic works, I can get the table to show and hide on click however, when I pass hide millisecond values, the table still disappears instantly. Here is my structure.

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;
});

I put in 100000 just to test if it was actually doing anything, which it is not. Any suggestions? Is there some basic principle here that I am over looking? Thanks!

UPDATE! I derived an answer from the marked answer in the post and another member who's answer was removed for some reason. Here is my final solution. Thank you to all that helped, greatly appreciate it!

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

You can use fadeIn or fadeOut for that.

In you code this could be:

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;
    });

Answer 2

Have you tried to remove the line that hide the div in this block?

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

I have tested that this .hide will hide the div and ignores your second .hide()

Edit 1 - Example added: https://jsfiddle.net/9eoq22ts/9/