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元素。您需要动态创建和添加元素才能使用此选项。 e.g。

设置实时自定义设置：

  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>

单击

1 个答案: