jquery - Animate specific paragraph using wow.js onclick -


i using wow.js animate different elements on page when scrolling. want rise animation on specific paragraph when clicked on button (in jquery).

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

i don't want initialize page animation once again (see below), animate concrete paragraph (with id = "reasons").

new wow().init(); 

how can this?

wow.js works page scroll.

you can trigger animation using 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 animate</p>

i have added infinite class change more visible.

make sure have linked animate.css in page. clicking on paragraph changes box class animated class necessary animation.

source:

triggering css3 transitions javascript

animate.css


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -