Question

我对jQuery很新，对于这段代码，我一直在使用animated.css

我的动画工作正常，点击我的对象动画使用此代码:(我根据堆栈溢出时提出的另一个问题使用）

$('button').click(function(){
$('animated swing').removeClass('animated swing');
$(this).addClass('animated swing');
});

然而，当你再次点击时没有任何反应。我看着让js使用变量然后删除一个类来监听动画结束，但这似乎也不起作用。也许我的语法都错了 - 或者我是否需要在点击时切换动画？

Answer 1

问题是您需要稍微更改一下代码。您忘记了CSS类选择器.：

$('button').click(function(){
  $('.animated.swing').removeClass('animated swing');
  $(this).addClass('animated swing');
});

尝试这个，1000％它应该工作！ :)

<强>段

$(function () {
  $('button').click(function(){
    $('.animated.swing').removeClass('animated swing');
    $this = $(this);
    setTimeout(function () {
      $this.addClass('animated swing');
    }, 100);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css" />
<button>Click Me!</button>

我为演示添加了setTimeout以显示真实的内容。 :)

每次单击特定元素时都会发生相同的动画

1 个答案: