Animate specific paragraph using wow.js onclick

jquery wow.js
Dawid picture Dawid · Apr 26, 2015 · Viewed 10.9k times · Source

I am using wow.js to animate different elements on the page when scrolling. Now I want to rise the animation only on the specific paragraph when clicked on the button (in jQuery).

<p id="reasons" class="wow fadeInUp" data-wow-delay="0.2s">x y z</p>

I don't want to initialize the page with the animation once again (see below), but only animate this concrete paragraph (with id = "reasons").

new WOW().init();

How can I do this?

Answer

Rafa Memmel picture Rafa Memmel · Aug 18, 2015

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 also works. :-)

Related questions

Wow.js repeat animation every time you scroll up or down

I'm pretty new with Jquery. I would like that my animations with Wow.js could run more than once time. For instance: i scroll to the bottom of my page and see all the animations, and if i scroll back …

Read More
How to stop WOW JS + CSS animate on smaller devices?

1) I've looked all over th web and just was wondering if anyone of you guys come across this problem where you wanted to stop the WOW JS animation for certain devices or/and for smaller screen sizes?! 2) Also it's quite …

Read More
How do I redirect to another webpage?

How can I redirect the user from one page to another using jQuery or pure JavaScript?

Read More