Question

我有一个简单的jQuery动画，并将其分配给一个带有锚标记的div，此动画仅在单击时播放。我想知道是否有办法完全播放动画然后将用户引导到下一页。

以下是动画的代码，如果有帮助的话：

$(".magicdiv4").click(function() {  
  $(".magicdiv4").addClass('magictime swashOut');  
});

感谢任何帮助！

Answer 1

所以，我假设您正在使用动画转场。如果是这样，现代浏览器将在转换完成时触发回调。您希望收听转换结束事件，然后运行转换到下一页的代码。

我创建了一个Plnkr，展示了它的工作原理：http://plnkr.co/edit/wJz4cQPtW7RrQ6zeuHyp?p=preview

以下是侦听这些事件的代码，应该按照您的意愿执行：

$(document).ready(function() {
  $(".magicdiv4").click(function() {
    $(".magicdiv4")
      .addClass('magictime')
      .bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", 
      function() {
        alert('load next page here');
      });
  });

以下是CSS示例：

.magicdiv4 {
  background-color: green;
}

.magictime {
  transition: background-color 2s ease;
  background-color: red;
}

最后，HTML：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div class="magicdiv4">
      hello world
    </div>
  </body>

</html>

请注意，如果您使用动画而不是过渡，则您要收听的事件应如下所示：

.bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() { });

播放动画然后加载下一页

1 个答案: