javascript - How to stop function execution on click? -

i have function shows slide animated elements.

the click on $('.slider-wrapper') must hide slide stop animations on , bring them initial position.

i use animate.css library animate elements. when hide slide before animation complete , open again, animations aren't running in order

how can reset animations on slide close , start them begining on slide show?

$('.slider-wrapper').on('click', function(event){   $(this).hide();   $('video')[0].pause();   cleartimeout(timer);   $('.slide').stop(true, false).hide();   $('.slide').find('*').removeclass('animated');   $('.slide').clearqueue(); });  $('.a-1').on('click', function(){   showslide1(); });  function showslide1() {   var slide = $('#slide-1');    slide.show().children().hide().delay(1000);   slide.children('h1.center').delay(400).show(0).addclass('animated zoomin');   slide.children('h1 + p').delay(2500).show(0).addclass('animated zoomin');   slide.children('.img-1').delay(3000).show(0).addclass('animated zoomin');   slide.children('.img-2').delay(3500).show(0).addclass('animated zoomin');   slide.children('.img-3').delay(4000).show(0).addclass('animated zoomin');   slide.children('.img-4').delay(4500).show(0).addclass('animated zoomin');   slide.children('h2').delay(6000).show(0).addclass('animated zoomin');   slide.children('.minsk').delay(6500).show(0).addclass('animated slideinup');   slide.children('.lib').delay(7000).show(0).addclass('animated slideinup'); } 

have tried using $.finish()

in case slide.finish(), should finish , apply animations when used

check out documentation here: https://api.jquery.com/finish/ think may jquery .animate

alternatively css animation try like:

$("#slide-1").click(function() {       var el     = $(this),        newone = el.clone(true);   el.before(newone);   $("." + el.attr("class") + ":last").remove();  }); 

this clone attribute , replace new 1 starting beginning.

another way javascript is:

var elm = this, var newone = elm.clonenode(true); elm.parentnode.replacechild(newone, elm); 

both of these should work css animations. these both rather simple ways of doing it. hope help!