How to wait for all animation to finish in jQuery?

Question

I have multi animations, I want to execute my code after all animations are done.

The problem with this code, that it's executed after the first animation done, and not waiting for all animations to be done.

any solution ?

<style>
   .userClass {
        animation: show 7s 6s forwards,zoom 8s 6s forwards,hide 5s 13s forwards;}


@@-webkit-keyframes show{
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
@@-webkit-keyframes zoom{
     //
    }
@@-webkit-keyframes hide{
     //
    }

</style>


<div class="userClass" id="user"></div>

<script>
$(document).ready(function () {

$("#user").bind("animationend", function () {           
            setTimeout(function () {
          //I want to execute code here
            }, 3000);

        });
});
</script>

Possible duplicate of [Callback when CSS3 transition finishes](http://stackoverflow.com/questions/9255279/callback-when-css3-transition-finishes) — Andreas, Aug 24 '16 at 12:17
`$('.selector').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);` — Brett Gregson, Aug 24 '16 at 12:17
@BrettGregson this not working, it's just detecting the first animation end...tnx — Hisham Aburass, Aug 25 '16 at 15:01
To repeat the animation you can remove the CSS class for the animation using `removeClass()` and then add it again using `addClass()` — Brett Gregson, Aug 25 '16 at 16:36

score 1 · Accepted Answer · answered Aug 24 '16 at 12:27

1

The "animationend" event will fire three times, first after 13 seconds, then again 1s later, then a third time 4s later (after 18s total).

Just count up a var and only handle the 3rd event.

answered Aug 24 '16 at 12:27

thanks for your answer, but can't be solved with more dynamic way?. – Hisham Aburass Aug 25 '16 at 15:03
I mean like detecting all animation ends in the view. – Hisham Aburass Aug 25 '16 at 15:04

score 1 · Answer 2 · answered Aug 24 '16 at 13:19

Create a variable to keep track of how many times animationEnd fires - the third time it happens, execute the code. Something like this:

$(document).ready(function () {

  // Keep track of how many animations have ended
  var animationEndCount = 0;

  $("#user").bind("animationend", function () {

    // Increment our counter
    animationEndCount++;

    // IF our counter is 3, run some code
    if (animationEndCount === 3) {
        setTimeout(function () {

        }, 3000);
    }
  });
});

How to wait for all animation to finish in jQuery?

2 Answers2