Javascript 每次向上或向下滚动时，Wow.js都会重复动画

我对Jquery非常陌生。我希望我的Wow.js动画可以运行不止一次。例如：我滚动到页面底部并查看所有动画，如果我滚动回顶部，我会再次看到动画，就像向下滚动一样。我希望我能解释清楚。我已经看到很多网站在他们的页面上重复动画，但不幸的是我不记得他们，我无法提供链接

我已经试过了：

$(window).scroll(function(){
    new WOW().init();
}

但是如果你滚动一点，它也会重复动画，这看起来很难看。我试图更好地解释我：我的动画有一个焦点，如果它被聚焦，动画被触发，然后我向下滚动到另一个div，上一个div不再可见（不在“窗口”视口中），然后我再次滚动回带有动画的div，动画再次被触发

我很抱歉问了这么麻烦的问题，但我真的不知道该怎么解释

---

提前谢谢

Benoît Boucart的这个例子展示了当用户滚动出视图并返回时如何“重置”动画。这里的关键点是第二个函数，当元素滚动出视图时，该函数将删除动画css类。我希望WOW.js能够实现这一点，但他们已经表示不打算这样做

片段：

// Showed...
$(".revealOnScroll:not(.animated)").each(function () {
  var $this     = $(this),
      offsetTop = $this.offset().top;

  if (scrolled + win_height_padded > offsetTop) {
    if ($this.data('timeout')) {
      window.setTimeout(function(){
        $this.addClass('animated ' + $this.data('animation'));
      }, parseInt($this.data('timeout'),10));
    } else {
      $this.addClass('animated ' + $this.data('animation'));
    }
  }
});
// Hidden...
$(".revealOnScroll.animated").each(function (index) {
   var $this     = $(this),
       offsetTop = $this.offset().top;
   if (scrolled + win_height_padded < offsetTop) {
     $(this).removeClass('animated fadeInUp flipInX lightSpeedIn')
   }
});

//显示了。。。
$（“.revealOnScroll:不是（.animated）”）。每个（函数（）{
变量$this=$（this），
offsetTop=$this.offset（）.top；
如果（滚动+赢得高度填充>偏移）{
if（$this.data（'timeout'））{
setTimeout（函数（）{
$this.addClass（'animated'+$this.data（'animation'）；
}，parseInt（$this.data（'timeout'），10））；
}否则{
$this.addClass（'animated'+$this.data（'animation'）；
}
}
});
//隐藏的。。。
$（.revelonscroll.animated”）。每个（函数（索引）{
变量$this=$（this），
offsetTop=$this.offset（）.top；
如果（滚动+赢得高度填充<偏移）{
$（this）.removeClass（'动画fadeInUp flipInX lightSpeedIn'）
}
});

如果用户希望在两个事件上重复动画，即

• onScrollUp
• onScrollDown

那么这将是一个很好的解决方案：

首先创建addBox函数，它将有助于将新元素推入

WOW

box数组

WOW.prototype.addBox = function(element){
    this.boxes.push(element);
};

然后使用

jQuery

和有助于检测哪个元素不在视图中的插件，然后按如下方式推送

WOW

：

$('.wow').on('scrollSpy:exit',function(){
    var element = $(this);
    element.css({
        'visibility' : 'hidden',
        'animation-name' : 'none'
    }).removeClass('animated');
    wow.addBox(this);
});

解决方案礼貌：

---

@vivekk的答案是正确的，我只是添加了一个工作示例，这样人们就可以很容易地得到它

看到小提琴了吗

//重复演示内容
变量$body=$（'body'）；
变量$box=$（'.box'）；
对于（变量i=0；i<20；i++）{
$box.clone（）.appendTo（$body）；
}
//WOW中添加元素框列表的帮助器函数
WOW.prototype.addBox=函数（元素）{
这个。盒子。推（元素）；
};
//初始化WOW.js并获取实例
var wow=新wow（）；
wow.init（）；
//将scrollSpy附加到.wow元素以检测视图退出事件，
//然后重置元素并再次添加动画
$（'.wow'）.on（'scrollSpy:exit'，function（）{
$（this.css）({
“可见性”：“隐藏”，
“动画名称”：“无”
}).removeClass（“动画”）；
哇，addBox（这个）；
}).scrollSpy（）；

这方面你运气好吗？

         <script>
         // 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();

       </script>