For example, I have a animation through 'animation-delay'. for 15 blocks. It is necessary that after playing the latest animation run the entire chain again. Is it possible to do something through js?

$.fn.extend({ animateCss: function (animationName) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; this.addClass('animated ' + animationName).one(animationEnd, function() { $(this).removeClass('animated ' + animationName); }); } }); $(document).ready(function() { $(".show1").animateCss('fadeIn'); $(".show2").css('animation-delay', '.5s'); $(".show2").animateCss('fadeIn'); $(".show2").css('animation-delay', '1s'); }); 
 <link href="http://daneden.imtqy.com/animate.css/animate.min.css" rel="stylesheet"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="show1"> Show1 </div> <div class="show2"> Show2 </div>

  • If you need greater accuracy of this very "immediately", then the problem is that the clocks in css and js go differently: jsfiddle.net/br3t/ypyzuas6 (the margin is taken in 4 "steps" so that all the blocks have time to be animated; in stock in 1 step, which was supposed to be, if the clock was synchronous, in practice the last few blocks "freezes") - br3t

1 answer 1

We already have an event handler at the end of the animation, we just need to pass to it a function that will restart the animation:

 animateCss: function(animationName, functionAtEnd) { ... }

The last animated object will pass a function that sets animation parameters:

 function animationSetup() { $(".show1").animateCss('fadeIn'); .... $(".show15").animateCss('fadeIn',animationSetup); }

The only thing is, if we immediately specify a class with animation, the browser will assume that the class was not removed, so I run the function through setTimeout at the minimum interval:

 this.addClass('animated ' + animationName).on(animationEnd, function() { $(this).removeClass('animated ' + animationName); setTimeout(functionAtEnd,10) })

Working example:

 $.fn.extend({ animateCss: function(animationName, functionAtEnd) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; this.addClass('animated ' + animationName).on(animationEnd, function() { $(this).removeClass('animated ' + animationName); setTimeout(functionAtEnd,10) }) } }); function animationSetup() { $(".show1").animateCss('fadeIn'); $(".show2").css('animation-delay', '.5s'); $(".show2").animateCss('fadeIn'); $(".show2").css('animation-delay', '1s'); $(".show3").animateCss('fadeIn',animationSetup); $(".show3").css('animation-delay', '2s'); } $(document).ready(function() { animationSetup() }); 
 <link href="http://daneden.imtqy.com/animate.css/animate.min.css" rel="stylesheet" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="show1"> Show1 </div> <div class="show2"> Show2 </div> <div class="show3"> Show3 </div>