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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

每次点击jquery都会触发动画

1 个答案: