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

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

animateNumber when you hit a certain scroll point | jQuery

html

javascript

jquery

counter

scroll