Jquery-Visibleが機能していない

Question

ページが読み込まれたときにスクロールしてスクロールしたいときにすべての.introクラスdivを非表示にしようとしています。私はanimate.cssとjquery-visibleを使用しています。私はまた、withinViewport.js、viewport.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> 

ここにはJSがありますが、そのどれも動作しません。

jQuery(document).ready(function() { 

    $('.section').addClass("hidden"); 
    if($('.section').hasClass('active')) { 
     $('.section').removeClass('hidden'); 
     $('.section').addClass('visible animated fadeIn'); 
    } 

}); 

$(window).scroll(function(){ 

    if($('.section').hasClass('active');) { 
     $('.section').removeClass('hidden'); 
     $('.section').addClass('visible animated fadeIn'); 
    } 
    if($('#section1').first().visible()) { 
     $('#section1').children().addClass('visible animated fadeIn'); 
    } 

} ); 

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>