向下滾動時動畫不起作用

我正在使用animate.css並試圖將動畫類應用於頁面中的不同部分。動畫正在工作，但不是當我滾動到該特定部分。所以現在如果我想看一個特定的部分動畫，那麼我將不得不刷新。所以我想知道如何在滾動條上實現動畫。向下滾動時動畫不起作用

查看完整的代碼在這裏http://codepen.io/anon/pen/rxoaWP

下面是JavaScript正在使用來實現它。不知道我哪裏錯了。提前致謝。

$(document).ready(function(){ 
    $(window).scroll(function(event)) { 
     var y = $.(this).scrollTop(); 
     if (y >= 300) { 
      $('#about').addClass('animated shake'); 
     } 
    }); 
}); 

$(document).ready(function(){ 
    $(window).scroll(function(event)) { 
     var y = $.(this).scrollTop(); 
     if (y >= 600) { 
      $('#about').addClass('animated shake'); 
     } 
    }); 
});

來源

2016-02-10 HebleV

'$（本）'????。 –

更好地使用animate.css使用哇哇js插件 – Kumar

我使用這個教程https://www.youtube.com/watch?v=ADmKnE4_DqQ – HebleV

如建議您可以使用wow.js，這將使它更容易。檢查：

.quot{ 
 
\t text-align:center; 
 
\t outline: 3px solid #BFBFBF; 
 

 
} 
 

 
#vision{ 
 
\t font-size: 22px; 
 
\t font-weight: bold; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/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.js"></script> 
 

 

 
<script> 
 
new WOW().init(); 
 
</script> 
 

 

 

 
<div class="row" > 
 
    <div class=""> 
 
    <div id="about" class="section wow bounceInUp scrollspy"> 
 
     <div class="container"> 
 
     <h2 class="wow bounceInDown" style="text-decoration:underline;text-align:center;font-weight:bold;font-family:Comic Sans MS">About Us</h2><br><br> 
 
      <div class="wow bounceInUp"> 
 
      <h5 style="color:#446CB3;padding-top:30px;text-decoration:underline;font-weight:bold;font-size:35px;font-family:Comic Sans MS">Vision</h5> 
 
      <p id="vision" class="wow bounceInUp">"Lorem ipsem Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsem</p> 
 
      <h5 style="color:#446CB3;text-decoration:underline;font-weight:bold;font-size:35px;font-family:Comic Sans MS">Mission</h5> 
 
      <p id="vision">"Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsem"</p> 
 
      <h5 style="color:#446CB3;text-decoration:underline;font-weight:bold;font-size:35px;font-family:Comic Sans MS">Objectives</h5> 
 
      <p id="vision">"Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsem"</p><br><br><br> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div><br><br> 
 
    
 
    <div class="row" > 
 
    <div class=""> 
 
    <div id="aboutyou" class="wow bounceInUp section scrollspy"> 
 
     <div class="container"> 
 
     <h2 class="wow bounceInUp" style="text-decoration:underline;text-align:center;font-weight:bold;font-family:Comic Sans MS;color:red">About you</h2><br><br> 
 
      <div class="wow bounceInUp"> 
 
      <h5 style="color:#446CB3;padding-top:30px;text-decoration:underline;font-weight:bold;font-size:35px;font-family:Comic Sans MS">Vision 1</h5> 
 
      <p id="vision" class="wow bounceInUp">"Lorem ipsem Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsem</p> 
 
      <h5 style="color:#446CB3;text-decoration:underline;font-weight:bold;font-size:35px;font-family:Comic Sans MS">Mission 1</h5> 
 
      <p id="vision" class="wow bounceInUp">"Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsem"</p> 
 
      <h5 style="color:#446CB3;text-decoration:underline;font-weight:bold;font-size:35px;font-family:Comic Sans MS">Objectives 1</h5> 
 
      <p id="vision" class="wow bounceInLeft">"Lorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsemLorem ipsem"</p><br><br><br> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div><br><br>

來源

2016-02-10 10:31:02

感謝您的快速入門，我能夠做到這一點。然而，如果任何人都可以讓我知道我的JS代碼中的錯誤，因爲想要使用普通的javascript或jquery實現相同的功能將會很棒。 – HebleV

向下滾動時動畫不起作用

回答

相關問題