CODEWITHSUNDEEP
jquerywow.js
Dawid
Dawid

Reputation: 41

Animate specific paragraph using wow.js onclick

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?

Upvotes: 4

Views: 12341

Answers (2)

Rafa Memmel
Rafa Memmel

Reputation: 21

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

Upvotes: 2

Ashesh
Ashesh

Reputation: 3599

WOW.js works with page scroll.

You can trigger the 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 to animate</p>

I have added an extra infinite class so that the change is more visible.

Make sure you have linked to animate.css in your page. Clicking on the paragraph changes the box class to animated class which is necessary for the animation.

Source:

Triggering CSS3 Transitions With JavaScript

Animate.css

Upvotes: 1

Related Questions