在视口中计数

Question

我致力于创建一个向上的数字，如以下链接所示： 主题森林链接

但是有很多问题：

第一个问题：当元素显示在视口中时，我需要做动画。

第二个问题：当我再次滚动时，元素编号是从上到下的动画，并且时长效果不好。不知道为什么会出现这个问题。

代码如下：

function countUp() {
    $('.count').each(function () {
        $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
        }, {
            duration: 4000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
}
$(function () {
    "user strict";
    $(window).scroll(function () {
        console.log("scroll top=" + $(this).scrollTop());
        console.log("div offset top=" + $("div").offset().top);
        var scrolling = $(this).scrollTop(),
            divoffset = $(".count").offset().top;
        if (scrolling > divoffset - 300) {
            countUp();
        }
    })
})

body{
    height:4000px;
}
.count{
    width:200px;
    height:200px;
    text-align:center;
    line-height:200px;
    border:1px solid #10f880;
    margin:1000px auto 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="count">1000</div>

注意：我试过这个Stack Overflow suggestion，但我想了解这个想法，谢谢：

Answer 1

function countUp() {
$('.count').each(function() {
    $(this).prop('Counter', 0).animate({
      Counter: $(this).text()
    }, {
      duration: 4000,
      easing: 'swing',
      step: function(now) {
        $(this).text(Math.ceil(now));
      }
    });
  });
}
$(function() {
  "user strict";
  var bAnimate = true;
  $(".count").css ("opacity", "0.0");
  
  $(window).scroll(function() {
    // console.log("scroll top=" + $(this).scrollTop());
    // console.log("div offset top=" + $("div").offset().top);
    var scrolling = $(this).scrollTop(),
      divoffset = $(".count").offset().top,
      screenBottom = scrolling + $(window).height(), 
      elemBottom = divoffset + $(".count").outerHeight (); // 
    if (screenBottom > elemBottom) {
      if (bAnimate) {
         $(".count").css ("opacity", "1.0");
        countUp();
        bAnimate = false;
      }
    }
  })
})

body {
  height: 4000px;
}

.count {
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  border: 1px solid #10f880;
  margin: 1000px auto 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="count">1000</div>

当屏幕底部（窗口高度）大于元素底部（元素顶部+outerHeight）时执行该函数。 使用 boolean 来阻止函数第二次执行。