1

我正在努力做到这一点，所以每当我点击某个元素时，其他元素都会使用 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>

4

1 回答 1

0

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>
于 2017-09-27T00:57:42.340 回答