jquery - 使用 wow.js onclick 动画特定段落

Question

我正在使用 wow.js 在滚动时为页面上的不同元素设置动画。现在，我只想在单击按钮时（在 jQuery 中）在特定段落上提升动画。

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

我不想再次用动画初始化页面（见下文），而只想为这个具体段落设置动画（用id = "reasons"）。

new WOW().init();

我怎样才能做到这一点？

Answer 1

HTML：

<button type="button" class="btn btn-default" id="mybutton">button</button>

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

查询：

$("#mybutton").click(function(){
    $("#reasons").addClass("wow fadeInUp animated");
    $("#reasons").attr("style","visibility: visible; animation-name: fadeInUp;");
});

在引导选项卡上它也可以工作。:-)

Answer 2

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