1

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?

Pepe
  • 960
  • 9
  • 21
  • Ouh, sorry for duplication - I dont know, that there is a simple js command for this ;(. – Pepe Aug 17 '17 at 15:54

1 Answers1

3

Subscribe to transitionend event:

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

$(".visible_div").on('transitionend', function() {
    $(".invisible_div").addClass("show");
});
dfsq
  • 191,768
  • 25
  • 236
  • 258