向下滚动时动画不起作用

Question

我正在使用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');
        }
    });
});

Answer 1

如建议的那样，您可以使用wow.js，这将使其变得更容易。 检查一下：

 .quot{ text-align:center; outline: 3px solid #BFBFBF; } #vision{ font-size: 22px; 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>