jQuery - Multiple click events

Question

I have a problem. I just started learning jQuery, my first experience with javascript at all. And I want to make an element animate on click, and I did make that work:

HTML:

<h1>Testing</h1>

I'm using Animate.css to make some animations happen on click. Here's my jQuery:

$('h1').click(function (e) { 

            $('h1').addClass('animated bounce');

        });

What I want to achieve is that when I click 2nd time, the animation happens again, in fact, I want to remove the animated bounce class and add it again, that way the animation will happen again.

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>

<body>
  
  <h1>Testing</h1>
  
  
  <script>

  
  $('h1').click(function (e) { 
          $('h1').addClass('animated bounce');
           
        });
  </script>

</body>

And please tell me if I'm doing the code the way it should be, I mean if the syntax is fine, I've seen codes with $(this) and I'm not sure what that is, also I've seen something like .on('click')

Thank You.

David · Accepted Answer · 2018-11-07T20:52:40.017

You need to remove the CSS class once the animation is over.

$('h1').click(function() {
  $(this).addClass('animated bounce').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    $(this).removeClass();
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<h1>Testing</h1>

For the rest, your syntax is fine.

Some notes:

e is an object based on Event describing the event which has occurred. It is optional. If you don't need data from the event you can skip it.
$(this) is a jQuery object. In the context of the callback, it is the element which invokes the function. In JavaScript, the this keyword is a very important and complex topic. You can read about it in MDN and here in SO.
one() is an event handler attacher that ensures the handler is executed just one time.
on() is other attacher. Have a look to this other SO question to learn when to use click() or on('click').

This is working perfectly, Just as I wanted. Thank You. What does ".one(....)" part do? — MareGraphics MaRe, Nov 06 '18 at 23:52

score 1 · Answer 2 · edited Nov 06 '18 at 23:52

1

Do this:

$('h1').on("click", function() {
  $(this).addClass('animated bounce');
  setTimeout(()=> $(this).removeClass('animated bounce'), 1000);
});

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>

<body>

  <h1>Testing</h1>

</body>

You use the toggleClass method - it toggles whether the element has the class, as the name would suggest.

edited Nov 06 '18 at 23:52

buhbang

715
1
7
18

answered Nov 06 '18 at 23:40

Jack Bashford

43,180
11
50
79

This would be the correct answer but i have to double click it after the 2nd try. – Mojo Allmighty Nov 06 '18 at 23:42
1

Not my question, just wanting to upvote your answer :) – Mojo Allmighty Nov 06 '18 at 23:43
@MojoAllmighty Yes, fixed, done! Does it work now? (also don't hesitate for the voting) – Jack Bashford Nov 06 '18 at 23:44
You're probably better off using `setTimeout` after animation finishes – buhbang Nov 06 '18 at 23:45
It's broken now, Well I'm new to jQuery so You guys help me :) – MareGraphics MaRe Nov 06 '18 at 23:51
Oh, it's working now with setTimeout. I get it. Thank You! – MareGraphics MaRe Nov 06 '18 at 23:58

jQuery - Multiple click events

2 Answers2