jquery addclass not working with 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>

where do i make mistakes? Thank you from now for your helps...

Answer 1

It because span is an inline element so transform and other properties will not work...

...so try to add display:inline-block to the span

Read this for more info on inline elements

...Also in your jQuery code use $(this).addClass("animated shake") instead of $(".test").addClass("animated shake").

$(this).addClass("animated shake")... it will add class to the clicked .test element.

$(".test").addClass("animated shake")... it will add class to all .test element.

Stack Snippet

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