Question

在单击按钮之后的事件的下一个脚本中，我希望在完成动画之后开始最后2个jquery事件。

我该怎么做？

<script>
$(document).ready(function() {
    $("button").click(function(){
        $("img:first").removeClass("bounceIn").addClass("animated lightSpeedOutleft")
        $("img:last").removeClass("bounceIn").addClass("animated lightSpeedOut");
        $("button:first").removeClass("bounceIn").addClass("animated flipOutX");
        $('div:first-child').addClass("display");
        $('div:last-child').removeClass("display").addClass("animated fadeInUp");
    });
});
</script>

Answer 1

如何添加.delay(500)功能？

Answer 2

如果您知道CSS动画的持续时间，可以使用setTimeout来延迟回复。

/// say this lightSpeedOutleft CSS animation takes a second to complete
$("img:first").removeClass("bounceIn").addClass("animated lightSpeedOutleft")
/// set your timeout for a second
setTimeout(function(){
  /// do further things here.
}, 1000);

但是，如果您不知道动画持续时间 - 或者您希望更精确 - 您可以使用动画特定事件。但请注意，这些事件相当新，并不会在所有浏览器中完全实现，而在某些情况下，它们将需要供应商前缀：

AnimationStart
AnimationIteration
AnimationEnd

使用示例：

$("img:first")
  .removeClass("bounceIn")
  /// you can list your vendor prefixed events here, or implement a better 
  /// vendor-prefix detection solution.
  .on('animationend webkitAnimationEnd', function(e){
    if ( e.animationName == 'YOUR CSS animation-name GOES HERE' ) {
      /// do something else here depending on e.animationName
    }
  })
  .addClass("animated lightSpeedOutleft")
;

有几个地方可以阅读这些事件：

考虑到所有因素，使用setTimeout完全有效，尤其是对于简单的动画。

完成上一个事件后开始事件

2 个答案: