Pepe Pepe - 2 months ago 8
jQuery Question

Run function only when the div height is 0 (animated), not before

For example I have just a simple html like this:

<div class="visible_div">My Div</div>
<div class="invisible_div">Now you can see me!</div>
<div class="button">My Button</div>


And I use following code to hide the div "visible_div" from maybe "500px" (just an example value) to "0px" only by addClass (I want to use the css way). This takes maybe 0.3s by CSS transition.

JS:

$(".button").click(function(){
$(".visible_div").addClass("hide");
});


CSS:

.visible_div {
height: 500px
transition: height 0.3s;}

.visible_div.hide {
height: 0px}


So, if the height of the div "visible_div" is "0" I will run the following script, but not before!

$(".invisible_div").addClass("show");


My problem: how can I check, if the div "visible_div" is no longer visible, without a delay inside the js script, to wait for the css animation?

Answer Source

Subscribe to transitionend event:

$(".button").click(function() {   
    $(".visible_div").addClass("hide");
});

$(".visible_div").on('transitionend', function() {
    $(".invisible_div").addClass("show");
});