Javascript 使用js滚动的CSS动画不起作用

我试图在我的登录页上制作一个动画，每当用户向下和向上滚动时

我在这个项目上使用了

WOW.js

和

Animate.css

。我找了很多参考资料，但都没有找到。我认为我的代码中有一个错误，因此这是我的代码：

<div class="row">
    <div class="col-sm-12">
        <h4 class="title-colcenter animation-test" data-wow-delay="1s" id="fiturtitle">FITUR</h4>
    </div>
</div>

---

最后：我已经做了一些更改，使其正常工作，但我想您还是想做一些不同的事情：

HTML:

开斋节

JS:

newwow（）.init（）；
var obj=‘FITUR’；
$（窗口）。滚动（函数（）{
log（$（window.scrollTop（））；
如果（$（窗口）.scrollTop（）==0）{
$（'.toanim'）.removeClass（“show”）；
$（'.fiturtitle'）.removeClass（“bounce”）；
$（“.toanim”）.append（obj）；
$（“.toanim”）.find（“：第一个子项”）.remove（）；
}
否则{
如果（！$（“.fiturtitle”）.hasClass（“反弹”））{
$（'.fiturtitle'）.addClass（“反弹”）；
$（'.toanim'）.addClass（“show”）；
控制台日志（“添加反弹”）；
}
}
});

检查以下内容：

基于

相当于建议的呼叫方式：

$(function() {
  // Handler for .ready() called.
})

---

因此，一些变化是：

（脚本）：

• 不要过早点燃魔兽世界物品。等待文档准备就绪，所以它应该包装在您的

  $（函数（）{}）

（风格）：

默认情况下，

image center

应该隐藏，并让animate lib为它们指定内联css

---

顺便说一下， 我不确定你在用这条线做什么：

if(imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow){

if（imagePostopOfWindow）{

---

您打算如何处理

.animation test

on scroll事件？？？

您缺少一个结束（

}）。另外，如果不能解决问题，请提供完整的工作代码来举例说明问题。控制台中有错误吗？另外，您可以创建一个使用您的代码的工作环境吗？我们将更容易地帮助您您的小提琴需要外部资源。请添加到它。@roy我已经更新了我的小提琴。请检查WOW没有定义，Jquery也没有。@azalika我正在测试它，它可以工作，你把Jquery添加到你的文件了吗<代码>

是的，我已经把它放在我的项目中了jquery.min.js。你能创建一个片段吗？@azalika我想我终于找到了。我更新了答案。

<h4 class="title-colcenter animation-test wow" id="fiturtitle" data-wow-delay="0.1s">

.fitur-wrap {
        margin-top: 100px;
    }
    .content-fitur{
        position:relative;
        z-index: 2;
    height: 900px;
        background: -moz-linear-gradient(top,  rgba(247,247,247,1) 0%, rgba(247,247,247,0) 37%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(247,247,247,1) 0%,rgba(247,247,247,0) 37%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(247,247,247,1) 0%,rgba(247,247,247,0) 37%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    }

    .content-fitur .image-center{
        text-align: center;
        margin:0 auto 40px auto;
    }

    .toanim {
        position: fixed;
        background-color: white;
        top: 0;
        left: 0;
        height: 80px;
        width: 100%;
        display: none;
        z-index: 9999;
    }
    .title-colcenter{
    text-align: center;
    font-weight: bold; 
    color: #e45b5b;
    padding-top: 25px;
    padding-bottom: 25px;
    margin: 0;
    font-size: 30px;
    }

 .show {
    display:block;
 }

<div class="toanim">
    <h4 class="fiturtitle title-colcenter wow" data-wow-delay="0.1s">FITUR</h4>
</div>

<div class="fitur-wrap content-fitur">
    <div class="container">
        <div class="row row-vertical-middle">
            <div class="col-xs-12 col-sm-4">
                <div class="image-center wow bounceInLeft" data-wow-delay="0.1s">
                    <img src="http://placekitten.com/g/200/300" alt="Bootstrap Image Preview" class="image_container">
                </div>
            </div>
        </div>
    </div>
</div>

new WOW().init();
var obj = '<h4 class="fiturtitle title-colcenter animation-test wow" data-wow-delay="0.1s">FITUR</h4>';
    $(window).scroll(function(){
        console.log($(window).scrollTop());
            if($(window).scrollTop() == 0){ 
                $('.toanim').removeClass("show");
                $('.fiturtitle').removeClass("bounce");
                $(".toanim").append(obj);
                $(".toanim").find(':first-child').remove();
            }
            else{
                if(!$( ".fiturtitle" ).hasClass( "bounce" )) {
                    $('.fiturtitle').addClass("bounce");
                    $('.toanim').addClass("show");
                    console.log("added bounce");
                }
            }
        });

$( document ).ready(function() {
  // Handler for .ready() called.
});

$(function() {
  // Handler for .ready() called.
})

.content-fitur .image-center{
 :
 :
 visibility: hidden;
}

if(imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow){