jQuery AddClass无法与Animate.css一起使用

Question

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

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

我在哪里犯错误？从现在开始感谢您的帮助...

Answer 1

it，因为 span是一个内联元素，因此 transform和其他属性将行不通...

...因此，尝试将display:inline-block添加到跨度

阅读此信息，以获取有关Inline Elements的更多信息

...也在您的jQuery代码中使用$(this).addClass("animated shake")代替$(".test").addClass("animated shake")。

$(this).addClass("animated shake") ...它将将类添加到单击的.test元素。

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

堆栈smippet

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

.test {
  display: inline-block;
}

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