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>