クリック時に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(); 

は、オンザフライでの要素を追加します：HTML本体に

<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> 

を：

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