如何在点击时停止功能执行？答案

【问题标题】：How to stop function execution on click?如何在点击时停止功能执行？
【发布时间】：2015-04-14 19:04:51
【问题描述】：

我有一个显示带有动画元素的幻灯片的功能。

点击 $('.slider-wrapper') 必须隐藏幻灯片停止它上面的所有动画并将它们带到初始位置。

我还使用 animate.css 库为一些元素设置动画。当我在动画完成之前隐藏幻灯片并再次打开它时，所有动画都没有按顺序运行

如何重置幻灯片关闭时的所有动画并在幻灯片放映时从头开始？

$('.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');
}

【问题讨论】：

可以包含html 吗？ , 可以创建 stacksn-ps , jsfiddle.net 吗？试过$('.slide, .slide *').stop(true, true)？
你在这里：nineseven.ru/html/mts-prezi。单击左侧带有“Идея”标签的圆圈以查看动画。
$('.slide, .slide *').stop(true, true) 是否返回预期结果？

标签： javascript jquery html css animation

【解决方案1】：

您是否尝试过使用$.finish()

在这种情况下slide.finish()，这应该完成并在使用时应用所有动画

在此处查看文档：https://api.jquery.com/finish/ 但我认为这可能主要是针对 jquery .animate

或者，对于 css 动画，您可以尝试以下操作：

$("#slide-1").click(function() {    

 var el     = $(this),  
     newone = el.clone(true);

 el.before(newone);

 $("." + el.attr("class") + ":last").remove();

});

这将克隆您的属性并从头开始用一个新属性替换它。

仅使用 JavaScript 的另一种方法是：

var elm = this,
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);

这两者都应该适用于 css 动画。然而，这些都是相当简单的方法。希望他们有所帮助！

【讨论】：