Murph_Fish Murph_Fish - 3 months ago 8
Javascript Question

Why is my div not hiding slowly?

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

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