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>

JQuery的：

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

在引导标签上，它也有效。： - ）

Answer 2

WOW.js适用于页面滚动。

您可以使用点击时使用jQuery toggleClass()方法触发动画。

  $(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>

我添加了一个额外的infinite类，以便更改更明显。

确保您已链接到网页中的animate.css。单击该段落会将box类更改为动画所需的animated类。

<强>来源：

Triggering CSS3 Transitions With JavaScript

Animate.css

使用wow.js onclick为特定段落设置动画

2 个答案: