Animate specific paragraph with wow.js onclick
I am using wow.js to animate various elements on the page when scrolling. Now I want to raise the animation only on a specific paragraph when I click a button (in jQuery).
<p id="reasons" class="wow fadeInUp" data-wow-delay="0.2s">x y z</p>
I don't want to re-initialize the page with animation (see below), but only animate this particular paragraph (s id = "reasons"
).
new WOW().init();
How can i do this?
source to share
WOW.js works with a list of pages.
You can trigger animations using the jQuery toggleClass()
Method on Click.
$(document).ready(function() {
$("#reasons").click(function() {
$(".box").toggleClass("animated");
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="reasons" class="box infinite fadeInUp">Click to animate</p>
I added an extra class infinite
to make the change more visible.
Make sure you link to animate.css
on your page. Clicking on a paragraph changes the class box
to animated
which is needed for the animation.
Source:
source to share
HTML:
<button type="button" class="btn btn-default" id="mybutton">button</button>
<p id="reasons" data-wow-delay="0.2s">x y z</p>
JQuery
$("#mybutton").click(function(){
$("#reasons").addClass("wow fadeInUp animated");
$("#reasons").attr("style","visibility: visible; animation-name: fadeInUp;");
});
On bootstrap tabs, it works as well. :-)
source to share