How to make animation occur several times

Question

How to make animation occur several times

Navigation

#1 by (3 votes)

1

I have a project where I imported animate.css so 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><linkhref="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 you can see in the code above, the animation is only done once and I wanted to replace a p with another how many times I clicked on button

html jquery animate.css

asked by anonymous 29.09.2017 / 13:08

1 answer

Is it possible to change a user-defined table type? Datepicker Bootstrap does not work

score 3 · Accepted Answer

In the Github of daneden teaches you 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><linkhref="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() gets the name of the effect as a parameter. Inside the function it waits for all the animation to finish to remove the properties of the same and thus to run again.

You can also set a setInterval() to trigger the animation from time to time.