点击时Wow.js延迟不起作用

Question

我正在尝试这样做，每当我点击某个元素时，其他元素就会使用wow.js动画延迟出现。动画本身在点击时工作，然而，延迟不在那里。

​

$(function() {
  $('#projects-btn').click(function() {
    $('.circle').addClass('wow fadeInUp animated');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<h1 id="projects-btn"></h1>
<div id="selectors">
  <div class="circle" data-wow-delay="2s"></div>
  <div class="circle" data-wow-delay="3s"></div>
  <div class="circle" data-wow-delay="4s"></div>
  <div class="circle" data-wow-delay="5s"></div>
  <div class="circle" data-wow-delay="6s"></div>
</div>

​

Answer 1

wow.js获取它在初始化过程中正在处理的元素的列表。您是在它运行之后添加类的，所以如果您希望它正确地运行这些元素，则必须重新初始化。你可能不想重新初始化，因为这会影响你页面上的其他元素。

但是，您可以使用live自定义设置来解决此问题。如果设置为true，WOW将在页面上查找新的WOW元素。您需要动态创建和添加元素才能使用此选项。例如：

设置实时自定义设置：

  var myWow = new WOW({live:true});
    myWow.init();

动态添加元素：

<script>
$(function() {
  $('#projects-btn').click(function() {
    $('#selectors').append('<div class="circle wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="1s">1</div>')
    $('#selectors').append('<div class="circle wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="2s">2</div>')
    $('#selectors').append('<div class="circle wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="3s">3</div>')
  });
});
</script>

在html主体中：

<h1 id="projects-btn">btn</h1>
<div id="selectors"></div>