Question

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

点击$（＆＃39; .slider-wrapper＆＃39;）必须隐藏幻灯片停止其上的所有动画并将它们带到初始位置。

我还使用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');
}

Answer 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动画一起使用。然而，这些都是相当简单的方法。希望他们帮忙！

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

1 个答案: