哇 js 不能使用滚动

Question

我正在使用 wow js 并且 animated.css 太棒了我真的很喜欢我只是遇到了一个小问题运行当用户滚动 500px 时的效果。

我可以看到 jquery 正在为运行插入 class 效果，但我看不到效果，如果我的 jquery 很难看请随时修复。

我在我的页面上插入了 wow 和 animated.css classes 手册并且效果很好，当我尝试与 jquery 一起使用时会发生此错误有代码。

html之前：

 <footer>
 </footer>

html运行后效果：

<footer class="wow shake" style="visibility: visible; animation-name: shake;">

js:

var fixed = false;    
$(document).scroll(function() {
    if( $(this).scrollTop() >= 500 ) {
        if( !fixed ) {
            fixed = true;
            // $('footer').css({position:'fixed',top:20});
            $('footer').addClass('wow shake').css({visibility: 'visible', 'animation-name': 'shake'});

            // .one('animationend webkitAnimationEnd  mozanimationend MSanimationend oAnimationEnd');
        }
    } else {
        if( fixed ) {
            fixed = false;
            $('footer').removeClass('wow shake');
        }
    }
});

Answer 1

您的代码足够接近，检查了行为，发现您应该添加一个额外的 class animated 才能工作。

不过，你想做的事情好像不需要wow.js来实现，用

就可以了

$(target).addClass('animated shake').show();

显示动画，然后使用

$(target).hide();

隐藏它就足够了，在代码段中添加了一个示例。

如果我误解了你想要实现的目标，请指出我。

new WOW().init();
var fixed = false;
// These are the classes when the animation is processing.
var animateGroup = 'wow shake animated';
$(document).scroll(function() {
    if( $(this).scrollTop() >= 500 ) {
        if( !fixed ) {
            fixed = true;
            // Make them show.
            $('footer')
                .addClass(animateGroup)
                .css({visibility: 'visible', 'animation-name': 'shake'}); 
          
            // Demo without wow.js
            $('.noWow').addClass('animated shake').show();
        }
    } else {
        if( fixed ) {
            fixed = false;
            // Remove anything we just added.
            $('footer')
                .removeClass(animateGroup)
                .removeAttr('style');
                // Or if you have other styles, use below to remove specific style instead.
                //.css({visibility: '', 'animation-name': ''});
          
          // Demo without wow.js
          $('.noWow').hide();
        }
    }
});

body {
    width: 100%;
    height: 2000px;
    background-color: gray;
}

footer {
    visibility: hidden;
    position: fixed;
    top: 20px;
    width: 50px;
    height: 20px;
    background-color: cyan;
}

.noWow {
    display: none;
    position: fixed;
    top: 20px;
    left: 100px;
    width: 50px;
    height: 20px;
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">

<footer>
 </footer>
<div class="noWow">
 </div>

Answer 2

取而代之的是，你必须使用带滚动的继续动画......我认为这样更好，当你在他们的地方使用滚动动画时也可以正常工作......像这样.....您也可以在 Codepen

中查看我的示例

 // Repeat demo content
  var $body = $('body');
  var $box = $('.box');
  for (var i = 0; i < 20; i++) {
    $box.clone().appendTo($body);
  }

  // Helper function for add element box list in WOW
  WOW.prototype.addBox = function(element) {
    this.boxes.push(element);
  };

  // Init WOW.js and get instance
  var wow = new WOW();
  wow.init();

  // Attach scrollSpy to .wow elements for detect view exit events,
  // then reset elements and add again for animation
  $('.wow').on('scrollSpy:exit', function() {
    $(this).css({
      'visibility': 'hidden',
      'animation-name': 'none'
    }).removeClass('animated');
    wow.addBox(this);
  }).scrollSpy();

body{
overflow-x:hidden;
}
.box {
  display: block;
  width: 200px;
  background: rgba(255, 255, 255, 0.7);
  color: #eb3980;
  font-family: "Comic Sans MS", "Comic Sans";
  border: 3px dashed pink;
  margin: 30px auto;
  text-align: center;
}

.doge {
  display: block;
  width: 200px;
  height: 200px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: url(http://mynameismatthieu.com/WOW/img/wow-8.gif) no-repeat;
}

body {
  background: url(http://mynameismatthieu.com/WOW/img/wow-logo.jpg) #fff fixed no-repeat center center;
}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script src="https://gitcdn.xyz/repo/thesmart/jquery-scrollspy/0.1.3/scrollspy.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<body>
<div class="box">
  <h1 class="wow slideInLeft">Hello</h1>
  <h1 class="wow slideInRight">World</h1>
  <h2>  </h2>
</div>
<div class="doge wow bounceIn"></div>
</body>

哇 js 不能使用滚动

Wow js not working with scroll

html

javascript

css

jquery

wow.js