Wow.js Verzögerung funktioniert nicht auf Klick

Question

Ich versuche es so zu machen, immer wenn ich auf ein bestimmtes Element klicke, werden andere Elemente mit wow.js Animationen mit einer Verzögerung angezeigt. Die Animation selbst funktioniert bei Klick, die Verzögerung ist jedoch nicht vorhanden.

$(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 bekommt eine Liste der Elemente, die es während seiner Initialisierung arbeitet. Sie fügen die Klassen nach dem Ausführen hinzu, sodass Sie neu initialisiert werden müssen, wenn Sie möchten, dass diese Elemente korrekt ausgeführt werden. Sie möchten sich wahrscheinlich nicht neu initialisieren, da dies andere Elemente auf Ihrer Seite beeinträchtigen würde.

Sie können dies jedoch umgehen, indem Sie die benutzerdefinierte Einstellung live verwenden. Wenn dies auf "True" gesetzt ist, sucht WOW nach neuen WOW-Elementen auf der Seite. Sie müssen Ihre Elemente im laufenden Betrieb erstellen und hinzufügen, um diese Option zu verwenden. z.B.

Set Live benutzerdefinierte Einstellung:

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

Fügen Sie die Elemente on the fly:

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

im HTML-Körper:

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