Question

我有多个动画，我希望在完成所有动画后执行我的代码。

此代码存在问题，即在第一个动画完成后执行，而不是等待所有动画完成。

任何解决方案？

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

Answer 1

＆＃34; animationend＆＃34;事件将触发三次，首先是13秒后，然后是1秒后，然后是第三次4秒后（总共18秒后）。

只计算一个var并且只处理第三个事件。

Answer 2

创建一个变量来跟踪animationEnd发生的次数 - 第三次发生时，执行代码。像这样：

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

如何等待所有动画在jQuery中完成？

2 个答案: