由滚动值触发的Jquery数字计数器动画

jquery number counter animation triggered by scroll value

本文关键字：Jquery 数字 计数器 动画 滚动      更新时间：2023-09-26

所以我想做一个计数器，由一个特定的滚动值触发，换句话说，我希望用户在到达某个滚动值

时看到动画数字从0到指定的数字

，这是我到目前为止的内容:

$(document).scroll(function(){
    var _scrollTop = $(document).scrollTop();
    if(_scrollTop >= 1490){
        $('.Count').each(function () {
            var $this = $(this);
                jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
                    duration: 3000,
                    easing: 'swing',
                    step: function () {
                        $this.text(Math.ceil(this.Counter)).stop();
                    }
                });
        }); 
    }
});

但是每当我滚动到该值以上时，数字都会刷新，当用户滚动到该值上方时，我想让它动画一次，然后保持在html上的指定值上非常感谢您的帮助

全站提琴

如果scroll函数不需要再次运行，在第一次满足条件(计数器启动)之后，您可以选择完全取消该函数的绑定:

if(_scrollTop >= 1490){
    $(document).unbind('scroll');
    //......

这将取消文档上所有绑定的滚动事件，如果你实现多个滚动事件，你可以将特定的委托存储在一个变量中并取消绑定

相关文章：