CODEWITHSUNDEEP
javascriptjquerycsscss-animations
Hisham Aburass
Hisham Aburass

Reputation: 625

How to wait for all animation to finish in jQuery?

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>

Upvotes: 0

Views: 1005

Answers (2)

skyline3000
skyline3000

Reputation: 7913

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

Upvotes: 1

user5734311
user5734311

Reputation:

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.

Upvotes: 1

Related Questions