CSS animation add class and remove class using Jquery

Question

I have one question about add and remove class using css animation.

I have created this DEMO from codepen.io

In this demo you can see there is six round div. Also there is one link ( Click here ).

If you click to Click here button then you can see the CSS animation. So i want to add a jquery code. Like first the six round div is display:none; when you click Click here button then six round div open with animation but only one time. after then when you click again Click here button then six round div automatically remove with css animation.

Anyone can help me here ?

Answer 1

First of all you need to do to delete the following line within the .circle

-webkit-animation-iteration-count: infinite;
-webkit-animation-direction:alternate;

Then you can use Mouser 's and sareed 's code:

$(document).ready(function() {
     var circle = $('.circle');
     $(".note a").click(function(e) {
      e.preventDefault();
     $('.wrap').css('display', 'block');

        if (circle.hasClass('bounceInUp')) {
         circle.removeClass('bounceInUp').addClass('bounceOutDown');
          }
           else 
          {
         $('.circle').addClass('animated bounceOutDown');
         circle.removeClass('bounceOutDown').addClass('bounceInUp');
           }
      });
  });

I hope this will help you.

Answer 2

$(document).ready(function() {
  $('.wrap').css('display', 'none'); 
  $(".note a").click(function(e) {
    e.preventDefault();

     $('.wrap').css('display', 'block'); 
     $('.circle').addClass('animated bounceInUp');
     $(this).parent('.note a').removeClass('.circle bounceInUp');
     $(".note a").off('click');   //remove click handler.      

     //Adding the new click handler
     $(".note a").click(function(e) {
        e.preventDefault();

        $('.circle').addClass('animated bounceOutDown');
        $(this).parent('.note a').removeClass('.circle animated bounceOutDown');
        $(".note a").off('click');  //remove click handler again.
     });
  });
});

Add a second click handler to the button

Answer 3

Check to see if the added class is present and remove/do animation if it is. Check out hasClass();

Edit: Add something similar to this in your handler:

var circle = $('.circle');
if (circle.hasClass('bounceInUp')) {
  circle.removeClass('bounceInUp').addClass('bounceOutDown');
}
else {
$('.circle').addClass('animated bounceOutDown');
  circle.removeClass('bounceOutDown').addClass('bounceInUp');
}

codepen