jQuery 动画数字计数器从零到值

IT技术 javascript jquery html animation each
2021-03-07 18:25:55

我已经创建了一个脚本来动画一个数字从零到它的值。

在职的

jQuery

$({ Counter: 0 }).animate({
  Counter: $('.Single').text()
}, {
  duration: 1000,
  easing: 'swing',
  step: function() {
    $('.Single').text(Math.ceil(this.Counter));
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Single">150</span>

不工作

我现在想为每个匹配的类在页面上多次运行脚本。

以下是我正在尝试但迄今为止没有成功的内容：

HTML

<span class="Count">200</span>
<span class="Count">55</span>

查询

$('.Count').each(function () {
  jQuery({ Counter: 0 }).animate({ Counter: $(this).text() }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      $(this).text(Math.ceil(this.Counter));
    }
  });
});
6个回答

您this没有引用步骤回调中的元素，而是希望在函数的开头保留对它的引用（$this在我的示例中包含）：

$('.Count').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      $this.text(Math.ceil(this.Counter));
    }
  });
});

更新：如果你想显示十进制数字，那么Math.ceil你可以四舍五入到 2 位小数，而不是四舍五入，例如value.toFixed(2)：

step: function () {
  $this.text(this.Counter.toFixed(2));
}
如果我们有十进制数呢？
2021-04-24 18:25:55
@VilasKumkar 我知道这是一个旧线程，但对于未来的 Google 员工，以下是我如何调整答案以处理小数以及前缀和后缀（例如，“1234 万美元”（我确定它可能更清晰）：gist.github.com/ashicus/b18f2831d7d21fc10fe2e47c41922328
2021-05-02 18:25:55
我无法得到@Obsidian 发布的使用小数的小提琴，100.50显示为101，尝试使用@ashicus 和@floribon 代码但不起作用，有什么想法吗？提前致谢！
2021-05-07 18:25:55
我还用打印任意小数位数的方法更新了我的答案
2021-05-11 18:25:55
感谢@floribon 的精彩片段。如果我想在使用相同的代码进行计数后进行倒计时，我可以为不编写两次代码做些什么？任何的想法？
2021-05-15 18:25:55

this 步骤回调内部不是元素而是传递给 animate() 的对象

$('.Count').each(function (_, self) {
    jQuery({
        Counter: 0
    }).animate({
        Counter: $(self).text()
    }, {
        duration: 1000,
        easing: 'swing',
        step: function () {
            $(self).text(Math.ceil(this.Counter));
        }
    });
});

另一种方式来做到这一点，并保持引用this会

$('.Count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 1000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

小提琴

重要提示：这似乎是一个很小的差异，但您确实应该使用数据属性来保存要计数的原始数字。更改原始数字可能会产生意想不到的后果。例如，每当一个元素进入屏幕时，我都会运行这个动画。但是如果元素进入，退出，然后在第一个动画完成之前第二次进入屏幕，它会计数到错误的数字。

HTML：

<p class="count" data-value="200" >200</p>
<p class="count" data-value="70" >70</p>
<p class="count" data-value="32" >32</p>

查询：

$('.count').each(function () {
    $(this).prop('Counter', 0).animate({
            Counter: $(this).data('value')
        }, {
        duration: 1000,
        easing: 'swing',
        step: function (now) {                      
            $(this).text(this.Counter.toFixed(2));
        }
    });
});
太感谢了！这正是我遇到的上述问题。
2021-05-01 18:25:55

代码的作用是，数字 8000 从 0 到 8000 计数。问题是，它被放置在很长页面的中间，一旦用户向下滚动并实际看到数字，动画就已经开始了. 一旦计数器出现在视口中，我想触发它​​。

JS：

$('.count').each(function () {
                $(this).prop('Counter',0).animate({
                        Counter: $(this).text()
                }, {
                        duration: 4000,
                        easing: 'swing',
                        step: function (now) {
                                $(this).text(Math.ceil(now));
                        }
                });
            });

和 HTML：

 <span class="count">8000</span>

这是我的解决方案，当元素显示到视口中时，它也有效

您可以通过单击jfiddle来查看正在运行的代码

var counterTeaserL = $('.go-counterTeaser');
var winHeight = $(window).height();
if (counterTeaserL.length) {
    var firEvent = false,
        objectPosTop = $('.go-counterTeaser').offset().top;

        //when element shows at bottom
        var elementViewInBottom = objectPosTop - winHeight;
    $(window).on('scroll', function() {
        var currentPosition = $(document).scrollTop();
        //when element position starting in viewport
      if (currentPosition > elementViewInBottom && firEvent === false) {
        firEvent = true;
        animationCounter();
      }   
    });
}

//counter function will animate by using external js also add seprator "."
 function animationCounter(){
        $('.numberBlock h2').each(function () {
            var comma_separator_number_step =           $.animateNumber.numberStepFactories.separator('.');
            var counterValv = $(this).text();
            $(this).animateNumber(
                {
                  number: counterValv,
                  numberStep: comma_separator_number_step
                }
            );
        });
    }


https://jsfiddle.net/uosahmed/frLoxm34/9/
其它你可能感兴趣的问题
上一篇颜色逻辑算法 下一篇使用 ngRepeat 时限制显示结果的数量