我试图让这个jQuery动画计数器在用户向下滚动200像素以下时立即触发:

here中的原始jQuery代码

$('.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));
        }
    });
});


我尝试将其包装在以下jQuery中,但直到最后都不会触发动画:

$(window).scroll(function() {
    if ($(window).scrollTop() > 200) {
        $('.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));
                }
            });
        });
    }
});


HTML:

<span class="Count">100</span>
<br/>
<span class="Count">200</span>
<br/>
<span class="Count">300</span>


其他帖子的小提琴是here

当用户向下滚动到视图或页面向下200像素时,触发jQuery计数器的最佳方法是什么?我也尝试过jQuery Wayfinder,但使其运作起来并没有任何运气。

最佳答案

触发动画之前,请取消绑定滚动处理程序(与$(window).off("scroll")),以防止用户继续滚动时动画重新启动。



$(window).scroll(startCounter);
function startCounter() {
    if ($(window).scrollTop() > 200) {
        $(window).off("scroll", startCounter);
        $('.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));
                }
            });
        });
    }
}

body {
    font-family: sans-serif;
    height: 300vh;
}
.Count {
    position: fixed;
    top: 8px;
    left: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Count">100</div>

10-07 16:31
查看更多