每次点击都会触发动画jquery
问题描述:
我只是想通过jquery的animate.css在每次点击时触发动画。我的代码只是第一次触发动画。每次点击都会触发动画jquery
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');
});
我做错了!
答
从jQuery的
这是因为在第二次,按钮已经有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>
答
使用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
更新的加载相关的CSS代码 –
相关的CSS是在这里:[animate.css(https://daneden.github.io/animate.css/) –