jquery – 在视口中动画计数器

我有一个计数器,动画到 HTML中定义的最后一个数字.不过我希望这个动画在视口中出现.

我有一个fiddle here,显示滚动似乎影响计数器号码.

$(document).ready(function() {
      $(function($,win) {
        $.fn.inViewport = function(cb) {
          return this.each(function(i,el) {
            function visPx() {
              var H = $(this).height(),r = el.getBoundingClientRect(),t = r.top,b = r.bottom;
              return cb.call(el,Math.max(0,t > 0 ? H - t : (b < H ? b : H)));
            }
            visPx();
            $(win).on("resize scroll",visPx);
          });
        };
      }(jQuery,window));

      $(".fig-number").inViewport(function(px) {
        $(this).each(function() {
          $(this).prop('Counter',0).animate({
            Counter: $(this).text()
          },{
            duration: 1000,step: function(Now) {
              $(this).text(Math.ceil(Now));
            }
          });
        });
      });
    });

我尝试过多件事情,但我似乎无法实现我所追求的目标.

$(document).ready(function() {
  $(function($,win) {
    $.fn.inViewport = function(cb) {
      return this.each(function(i,el) {
        function visPx() {
          var H = $(this).height(),b = r.bottom;
          return cb.call(el,t > 0 ? H - t : (b < H ? b : H)));
        }
        visPx();
        $(win).on("resize scroll",visPx);
      });
    };
  }(jQuery,window));

  $(".fig-number").inViewport(function(px) {
    $(this).each(function() {
      $(this).prop('Counter',0).animate({
        Counter: $(this).text()
      },{
        duration: 1000,step: function(Now) {
          $(this).text(Math.ceil(Now));
        }
      });
    });
  });
});

html,body {
  height: 100%;
}
#upper-push {
  height: 100%;
  width: 100%;
  display: block;
  background: red;
  color: white;
}

<div id="upper-push">
  Scroll down
</div>
<div id="numbers">
  <span class="fig-number">25</span>
  <span class="fig-number">78</span>
</div>

解决方法

.inViewport()插件在每个滚动事件上触发回调.
这是设计. (帮助保持插件的源代码！))

在“plugin page”你可以看到如何使用它：

$("selector").inViewport(function(px) {
  console.log( px ); // `px` represents the amount of visible height
  if(px){
    // do this if element enters the viewport // px > 0
  }else{
    // do that if element exits  the viewport // px = 0
  }
}); // Here you can chain other jQuery methods to your selector

这意味着：

>你必须收听px参数大于0(元素在视口中)
>为了防止链接额外的动画创建累积,你应该使用一个标志变量
>(回调中的$(this).each()不需要,插件已经在元素集合上运行了.)

Edited jsFiddle demo

jQuery(function($) { // DOM ready and $in scope

  $(".fig-number").inViewport(function(px) {
    // if px>0 (entered V.port) and
    // if prop initNumAnim flag is not yet set = Animate numbers
    if(px>0 && !this.initNumAnim) { 
      this.initNumAnim = true; // Set flag to true to prevent re-running the same animation
      // <<< DO SOME COOL STUFF HERE! 
    }
  });

});

代码段示例：

// inViewport jQuery plugin
// https://stackoverflow.com/a/26831113/383904
$(function($,win) {
  $.fn.inViewport = function(cb) {
    return this.each(function(i,el){
      function visPx(){
        var H = $(this).height(),t=r.top,b=r.bottom;
        return cb.call(el,t>0? H-t : (b<H?b:H)));  
      } visPx();
      $(win).on("resize scroll",visPx);
    });
  };
}(jQuery,window));


jQuery(function($) { // DOM ready and $in scope

  $(".fig-number").inViewport(function(px) { // Make use of the `px` argument!!!
    // if element entered V.port ( px>0 ) and
    // if prop initNumAnim flag is not yet set
    //  = Animate numbers
    if(px>0 && !this.initNumAnim) { 
      this.initNumAnim = true; // Set flag to true to prevent re-running the same animation
      $(this).prop('Counter',step: function (Now) {
          $(this).text(Math.ceil(Now));
        }
      });         
    }
  });

});

html,body {
  height:100%;
}

#upper-push {
  height:100%;
  width:100%;
  display:block;
  background:red;
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="upper-push">
  Scroll down
</div>
<div id="numbers">
  <span class="fig-number">25</span>
  <span class="fig-number">78</span>
</div>