jQuery - 出现在视口中的动画数字答案

【问题标题】：jQuery - Animate numbers when appears in viewportjQuery - 出现在视口中的动画数字
【发布时间】：2015-04-15 15:54:40
【问题描述】：

我目前正在尝试在用户滚动并且 DIV 出现在视口中时为一些数字设置动画。 就像这样：http://www.dimfolio.fr/

在示例中它看起来是 CSS3，出于某些原因我更喜欢使用 jQuery。

目前，我使用“animateNumber”插件和这个函数来检查div是否出现在视口中：

$.fn.is_on_screen = function(){

var win = $(window);

var viewport = {
    top : win.scrollTop(),
    left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();

var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();

return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};

这是我的代码：

JS：

function animate_stats() {
  $('.stats_number').each(function() {
     if(!$(this).hasClass("numbered")) {
        var thisnumber = $(this).attr('title');
        $(this).animateNumber({ number: thisnumber }, 3000, function() {
            $(this).addClass('numbered');
        });
     }
  });
};

if( $('#statistics').is_on_screen() ) {
  animate_stats();
}

$(window).scroll(function(){
  if( $('#statistics').is_on_screen() ) {
     animate_stats();
  }
});

HTML：

<a href="#" class="stat">
   <div class="stats_number" title="79">0</div>
   <br />
   My title
</a>

问题是数字动画在div出现的时候反复重复。当然我希望动画只运行一次。

我认为问题出在我对“每个”功能的使用，但请注意。

有人可以帮忙吗？非常感谢！

【问题讨论】：

可能想签出WOW.js
感谢您的回复，无论如何，正如我所说，我更喜欢使用 jQuery 而不是 CSS。

标签： javascript jquery jquery-animate viewport

【解决方案1】：

动画运行后，移除监听器。

$(window).on('scroll.animateStats', function(){
  if( $('#statistics').is_on_screen() ) {
     animate_stats();
     $(window).off('scroll.animateStats');
  }
});

我将滚动事件命名为命名空间，这样当我们删除它时，我们只会删除此事件处理程序，而不是所有滚动处理程序。

【讨论】：