Pepe Pepe - 7 months ago 39
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.




.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!


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").on('transitionend', function() {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download