在每次点击上应用动画，而不是每两次。

Question

我使用的是Toggleclass jquery函数，它在每次单击时切换animated wobble类。我怎样才能在每一次点击(不是每两次点击一次)上动画这个按钮。animate.css为您播报。

​

$("#Bouncebtn").click(
  function(e) {
    e.preventdefault
    $("#Bouncebtn").toggleClass('animated wobble');
  });

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button id="Bouncebtn" class="shake ">bounce</button>

​

Answer 1

你需要等待动画的结束。因此，您可以监听动画结束

​

$("#Bouncebtn").on('click', function (e) {
    e.preventDefault();
    $("#Bouncebtn").toggleClass('animated wobble');
}).on('animationend', function(e) {
    $("#Bouncebtn").toggleClass('animated wobble');
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="Bouncebtn" class="">bounce</button>

​

Answer 2

在$("#Bouncebtn").toggleClass('animated wobble');行下添加下面的代码行。这是因为在第一个click类中，分配了click类，在第二个click类中，删除了这样的动画。

    setTimeout(function(){
        $("#Bouncebtn").removeClass('animated wobble');
    }, 1000);

​

$("#Bouncebtn").click(
  function(e) {
    e.preventdefault
    $("#Bouncebtn").toggleClass('animated wobble');
    
    setTimeout(function(){
        $("#Bouncebtn").removeClass('animated wobble');
    }, 1000);
  });

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button id="Bouncebtn" class="shake ">bounce</button>

​