在ViewPort中计数

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)时，执行该函数。使用布尔值停止函数第二次执行。