当有人滚动到 ID 时启动数字计数器 JQuery 动画

问题描述

有谁知道当你滚动到特定的父 ID 时如何启动数字计数器动画，比如 #counter-container

HTML：

<div id="counter-container">
<span class="count">6,000</span>
<span class="count">600</span>
<span class="count">60</span>
</div>

JQuery：

$(window).scroll(startCounter);
function startCounter() {
    if ($(window).scrollTop() > 200) {
        $(window).off("scroll",startCounter);
        $('.count').each(function () {
          var $this = $(this);
          jQuery({ Counter: 0 }).animate({ Counter: $this.text().replace(/,/g,'') },{
            duration: 1000,easing: 'swing',step: function () {
                $this.text(commaSeparateNumber(Math.floor(this.Counter)));
              },complete: function() {
                $this.text(commaSeparateNumber(this.Counter));
                //alert('finished');
              }
          });
        });
        function commaSeparateNumber(val) {
          while (/(\d+)(\d{3})/.test(val.toString())) {
            val = val.toString().replace(/(\d+)(\d{3})/,'$1' + ',' + '$2');
          }
          return val;
        }
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）