每次點擊都會觸發動畫jquery

Question

我只是想通過jquery的animate.css在每次點擊時觸發動畫。我的代碼只是第一次觸發動畫。

HTML

<input autocomplete="off" type="text" id="a-input" name="input"> 
<button id="next">Next</button> 

JS

$("#next").click(function() { 
      $('#a-input').removeClass().addClass('animated shake'); 
     }); 

我做錯了！

Answer 1

這是因爲在第二次，按鈕已經有animated shake類。刪除然後添加發生在同一時間...因此，元素沒有區別。

說動畫持續600毫秒......

使用setTimeout()一旦動畫完成，除去這些類。

其結果將是：

$("#next").click(function() { 
    $('#a-input').addClass('animated shake'); 
    setTimeout(function(){ 
    $('#a-input').removeClass(); 
    },650); 
}); 

$("#next").click(function() { 
 
    $('#a-input').addClass('animated shake'); 
 
    setTimeout(function(){ 
 
    $('#a-input').removeClass(); 
 
    },650); 
 
});

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

 
<input autocomplete="off" type="text" id="a-input" name="input"> 
 
<button id="next">Next</button>

從jQuery的

Answer 2

使用toggleClass：

$("#next").click(function() { 
 
     $('#a-input').effect("shake"); 
 
    });

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 

 
<script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<input autocomplete="off" type="text" id="a-input" name="input"> <button id="next">Next</button>

AGAIN