Question

我试图让这个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，但没有任何好运使它成功。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

吉利的答案很好，但它缺少使其从0开始并达到某个值的部分;

这是你可以做的：

＆＃13;

var stop = $("#someElement").offset().top;
    $(window).scroll(function() {
        if ($(window).scrollTop() > stop ) {
            $(window).off("scroll");
            $('.Count').each(function () {
                var $this = $(this);
                jQuery({ Counter: 0 }).animate({ Counter: $this.attr("data") }, {
                    duration: 1000,
                    easing: 'swing',
                    step: function () {
                        $this.text(Math.ceil(this.Counter));
                    }
                });
            });
        }
    });

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

maybe a little late, but this code works when you get at the bottom of the page

jQuery(         
    function($)
    {
        var banderaEstandar= true;
        $('#vista').on('scroll', function()
        {
            if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight && banderaEstandar)
            {
                $('.count').each(function () {
                $(this).prop('Counter',0).animate(
                {
                    Counter: $(this).text()
                }, 
                {
                    duration: 1000,
                    easing: 'swing',
                    step: function (now) {
                    $(this).text(Math.ceil(now));
                }
                });
                });
                banderaEstandar=false;
            }
        })
    }
    );

在窗口滚动上触发jQuery动画数字计数器

3 个答案: