How to make animation occur multiple times

Question

I have a project that I’ve imported animate.css so that the transitions would be funnier, but one of them only occurs to me once.

var check = true;

$(document).ready(function(){

  $(".p2").hide(); 

  $("button").click(function(){
    if(check){
      $(".p1").show().removeClass().addClass("animated flipOutX").on('webkitAnimationEnd oanimationend msAnimationEnd animationend', 
      function(e) {
        $(this).removeClass().hide();
        $(".p2").show().addClass("animated flipInX");
      });

    } else {
      $(".p2").show().removeClass().addClass("animated flipOutX").on('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
      function(e) {
        $(this).removeClass().hide();
        $(".p1").show().addClass("animated flipInX");
      });
    }

    check = !check;
    
  });
});

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

<p class="p1">Click me away!</p>
<p class="p2">Click me too!</p>
<br> 

<button class="btnFlip">Click</button>

As it is possible to see in the code above, the animation is only done once and I wanted it to replace one p for another how many times I clicked on button

Answer 1

On the Github of daneden teaches how to do this using jQuery.

Example:

$.fn.extend({
  animateCss: function(animationName) {
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);
    });
    return this;
  }
});

/*  
setInterval(function() {
  $('.p1').animateCss('bounce');
  $('.p2').animateCss('pulse');
}, 3000);
*/
$(".p2").addClass('hide');

$(".btnFlip").click(function () {
  $('.p1').toggleClass('hide').animateCss('flipOutX');
  $('.p2').toggleClass('hide').animateCss('flipInX');
});

.hide{
 display: none;
}

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

<p class="p1">Click me away!</p>
<p class="p2">Click me too!</p>
<br>

<button class="btnFlip">Click</button>

You can create a jQuery Function to simplify the whole process, in this example animateCss() takes the effect name as parameter. Inside the Function it waits for all the animation to end to remove the properties of the same and so run again.

You can also define a setInterval() to fire the animation from time to time.