当您点击某个滚动点时的 animateNumber | jQuery

Question

大家好，我对 jQuery 比较陌生，正在尝试在网站上创建信息图。当您到达页面上的某个滚动点时，我想让它计数到一个数字。当页面加载时，我使用插件将数字从 0 设置为 14。但是，当我尝试在某个滚动点调用该函数时，它只会循环。因此，我相信我需要一个解决方案来阻止它循环。我四处搜索并遇到了 .one() 但这似乎只适用于事件处理程序。感谢您的帮助！

我正在使用的插件： https://github.com/aishek/jquery-animateNumber

Javascript：

$(window).scroll(function () {

var wScroll = $(this).scrollTop();

if (wScroll > $('.infographic').offset().top - ($(window).height() / 1.2)) {

        $('#years').animateNumber({ 
            number: 14 
        },1500);
});

HTML：

<h2><span id="years">0</span></h2>

Answer 1

要停止动画循环（如果这就是你的意思），然后保留一个 flag 变量并在动画之后将其设置为 true，将其设置为 false，并在 if 条件中检查check的值

var check = true;

$(window).scroll(function () {

var wScroll = $(this).scrollTop();

if (wScroll > $('.infographic').offset().top - ($(window).height() / 1.2) && check) {

        $('#years').animateNumber({ 
            number: 14 
        },1500);
        check = false;
});