每次点击都会触发动画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