另一个效果完成后再运行一个jQuery函数

Question

我编写了以下两个函数：

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX",1000).promise().done(function () {
        $(".tile-group.six").load("musability-musictherapy-company-overview.html");
    });
});
</script> 

第一个在某些图块上执行过渡，过渡持续约3秒钟，即使我包含了.promise和.done，第二个函数仍会立即加载html页面，而不是等待效果/过渡完成。 我当时在考虑使用setTimeinterval来使第二个函数等到第一个函数完成，但是我不知道如何使用它来实现所需的行为。

页面上的整个过渡CSS

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.two {

    -webkit-animation-delay: 120ms; 
    animation-delay: 120ms;
}
.animated.three {
     -webkit-animation-delay: 320ms; 
    animation-delay: 320ms;
}
.animated.four {
      -webkit-animation-delay: 520ms; 
    animation-delay: 320ms;
}
.animated.five {
      -webkit-animation-delay: 720ms; 
    animation-delay: 720ms;
}
.animated.six {
     -webkit-animation-delay: 920ms; 
    animation-delay: 920ms;
}
.animated.seven {
      -webkit-animation-delay: 1020ms; 
    animation-delay: 1020ms;
}
.animated.eight {
      -webkit-animation-delay: 1220ms; 
    animation-delay: 1220ms;
}
.animated.nine {
      -webkit-animation-delay: 1620ms; 
    animation-delay: 1620ms;
}
.animated.ten {
      -webkit-animation-delay: 1820ms; 
    animation-delay: 1820ms;
}
.animated.eleven {
      -webkit-animation-delay: 2020ms; 
    animation-delay: 2020ms;
}
.animated.twelve {
      -webkit-animation-delay: 2220ms; 
    animation-delay: 2220ms;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}






/*CSS BIT FOR REVERSING THE ANIMATION ONCLICK EVENT 8*/


@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

Answer 1

简单的setTimeout可以完成这项工作。 你可以试试这个

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX");
    setTimeout(function(){
        $(".tile-group.six").load("musability-musictherapy-company-overview.html");
    }, 1000);

});
</script> 

Answer 2

我不确定jQueryUI addClass方法是否支持promises，但是您可以使用回调。

另外，您还必须阻止click事件的默认操作。

您所拥有的是：

$('.tile').on('click', function (e) {
    e.preventDefault();

    $(".tile").addClass("flipOutX");
    $(".tile")[0].addEventListener("animationend", function() {
        $(".tile-group.six").load("musability-musictherapy-company-overview.html");
    }, false);
});

动画结束事件的文档： https : //developer.mozilla.org/en-US/docs/Web/Events/animationend

可以在http://jqueryui.com/addClass/找到jQueryUI添加类的文档。

以下是有关return false;之间的区别的一些信息return false; 和event.preventDefault(); https://css-tricks.com/return-false-and-prevent-default/

Answer 3

更好，但更耗时：

将过渡动画移到jQuery.animate() 。 您将拥有更多控制权。

例如：

var css = {'height': '100%', opacity: 1};
var options = {
  duration: 3000,
  complete: function() {
    $(".tile-group.six").load("musability-musictherapy-company-overview.html");
  } 
};
$('.tile').on('click', function() {
  $(".tile").animate(css, options);
};

Answer 4

$('.tile').on('click', function () {
         $(".tile").addClass("flipOutX", 1000, load )
});

  function load() {
    $(".tile-group.six").load("musability-musictherapy-company-overview.html");
  }

Answer 5

如果.tile是链接，请在click事件的末尾添加return false ：

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX",1000).promise().done(function () {
        $(".tile-group.six").load("musability-musictherapy-company-overview.html");
    });

    return false;
});
</script>