jquery addclass不能与animate.css一起使用

Question

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".test").click(function() {
    $(".test").addClass("animated shake");
  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我在哪里犯错误？谢谢你的帮助......

Answer 1

因为span是一个内联元素，所以transform和其他属性不起作用......

...因此，请尝试将display:inline-block添加到范围

  

<强> Read this for more info on inline elements

...同样在您的jQuery代码中使用$(this).addClass("animated shake")而不是$(".test").addClass("animated shake")。

$(this).addClass("animated shake") ...它会为点击的.test元素添加类。

$(".test").addClass("animated shake") ...它会为所有.test元素添加类。

Stack Snippet

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".test").click(function() {
    $(this).addClass("animated shake");
  });
});

＆＃13;

.test {
  display: inline-block;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;