Jquery-Visible无效

Question

尝试在页面加载时隐藏所有.intro类div，但滚动时我希望它们淡入。我使用animate.css和jquery-visible。我还尝试使用withinViewport.js，viewport.js和其他一些。我无法让它发挥作用。

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

这是JS，但没有任何作用。

<div class="section " id="section0" data-anchor="firstPage">
        <div class="intro">
            <h1>Navigation dots</h1>
            <p>An easy and beautiful way to navigate throw the sections</p><p>phone number</p>
        </div>
    </div>
    <div class="section" id="section1" data-anchor="secondPage">
            <div class="intro">
                <h1>Clickable</h1>
                <p>
                    You can even click on the navigation and jump directly to another section.
                </p>
            </div>
    </div>

Answer 1

请使用animate.css和wow.js，您可以根据需要添加任何动画类。

wow = new WOW(
      {
          boxClass: 'wow',      // default
          animateClass: 'animated', // default
          offset: 0,          // default
          mobile: true,       // default
          live: true        // default
      }
    )
wow.init();

body{
  overflow-x:hidden; /*for animation purpose*/
}
.intro{
  height:500px;/*this is only for example*/
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>


<div class="section wow fadeInDown" id="section0" data-anchor="firstPage">
  <div class="intro">
      <h1>Navigation dots</h1>
      <p>An easy and beautiful way to navigate throw the sections</p><p>phone number</p>
  </div>
</div>
<div class="section wow fadeInLeft" id="section1" data-anchor="secondPage">
  <div class="intro">
    <h1>Clickable</h1>
    <p>
        You can even click on the navigation and jump directly to another section.
    </p>
  </div>
</div>
<div class="section wow fadeInRight" id="section2" data-anchor="thirdPage">
  <div class="intro">
    <h1>Clickable</h1>
    <p>
        You can even click on the navigation and jump directly to another section.
    </p>
  </div>
</div>
<div class="section wow fadeInLeft" id="section3" data-anchor="forthPage">
  <div class="intro">
    <h1>Clickable</h1>
    <p>
        You can even click on the navigation and jump directly to another section.
    </p>
  </div>
</div>