javascript - 当您点击某个滚动点时的 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;
});