4

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?

Rafael Almeida
  • 677
  • 7
  • 21
Dawid
  • 41
  • 1
  • 1
  • 2

2 Answers2

2

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

Rafa Memmel
  • 21
  • 6
  • Thanks! This worked perfectly for me. I used it to hide and then fade in different bootstrap panels based on clicking different tabs. – AlMar89 Dec 28 '15 at 18:44
1

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

Ashesh
  • 3,499
  • 1
  • 27
  • 44
  • 1
    Thanks you Ashesh. Finally I resolved it calling: `$("#reasons").fadeOut(); $("#reasons").fadeIn();` and the animation onclick seems to be the same as wow.js does. – Dawid Apr 26 '15 at 08:31