each() 只到达一个元素

Question

我正在向下滚动到我网站的某个点，然后我调用 each() 函数来为所有数字设置动画 (4)。然而each() 函数只循环一次，所以只有一个数字被动画化。

var activated = 0;

$(window).scroll(function() {
    var hT = $('#scroll-to-numbers').offset().top,
        hH = $('#scroll-to-numbers').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();

    if (wS > (hT + hH - wH)) {
        if (activated == 0) {
            activated = 1;
            animateNumbers();
        }     
    }
});

function animateNumbers(){
    $('#number-animate').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 9000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
}

<div class="row ">
    <div class="col">
        <h3 class="text-center">text</h3>
        <p class="bodytext">
            <span id="animate-number">1998</span>
        </p>
    </div>
    <div class="col">
        <h3 class="text-center">text</h3>
        <p class="bodytext">
            <span id="animate-number">250</span>
        </p>
    </div>
    <div class="col">
        <h3 class="text-center">text</h3>
        <p class="bodytext">
            <span id="animate-number">15</span>
        </p>
    </div>
    <div class="col">
        <h3 class="text-center">text</h3>
        <p class="bodytext">
            <span id="animate-number">350</span>
        </p>
    </div>
</div>

Answer 1

请试试这个小提琴，需要做一些改变 - 一个 html 文档只能有一个文档 ID - 您在 jquery 中提到了 #scroll-to-top 元素，但没有在 html 中添加它

这里正在工作working demo

这是你的 html 代码，你可以在任何你想要的地方添加滚动，也可以更改类名，但也请在 js 中进行更改。

<div class="row " id='scroll'>
<div class="col">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">1998</span>
</p>
</div>
<div class="col ">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">250</span>
</p>
</div>
<div class="col ">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">15</span>
</p>
</div>
<div class="col">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">350</span>
</p>
</div>
</div>

这里是js代码

var activated = 0;
$(window).scroll(function() {
var hT = $('#scroll').offset().top,
    hH = $('#scroll').outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();
    if (wS > (hT+hH-wH)){
        if(activated == 0)
        {
            activated = 1;
            animateNumbers();

        }     
    }
});
function animateNumbers(){
console.log('called');
    $('.bodytext>.animate-number').each(function () {

        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
            }, {
                duration: 9000,
                easing: 'swing',
                step: function (now) {
                    $(this).text(Math.ceil(now));
                }
        });
    });
}

为了更好的滚动效果请试试这个fiddle demo

Answer 2

首先，在这种情况下使用 CLASS 代替 ID。

其他事情，.each() 通常在内部循环，就像 A.Wolff 解释的那样。

让我们尝试更改一些 HTML 和一些 JS：

HTML

<div class="row">
  <div class="col animate-number-wrapper">
    <h3 class="text-center">text</h3>
    <p class="bodytext">
        <span class="animate-number">1998</span>
    </p>
</div>
<div class="col animate-number-wrapper">
    <h3 class="text-center">text</h3>
    <p class="bodytext">
        <span class="animate-number">250</span>
    </p>
</div>
<div class="col animate-number-wrapper">
    <h3 class="text-center">text</h3>
    <p class="bodytext">
        <span class="animate-number">15</span>
    </p>
</div>
<div class="col animate-number-wrapper">
    <h3 class="text-center">text</h3>
    <p class="bodytext">
        <span class="animate-number">350</span>
    </p>
</div>

JS

function animateNumbers(){
   $('.animate-number-wrapper').each(function () {
     $elem = $(this).find('.animate-number');
     $elem.prop('Counter',0).animate({
        Counter:  $elem.text()
     }, {
        duration: 9000,
        easing: 'swing',
        step: function (now) {
             $elem.text(Math.ceil(now));
        }
    });
   });
}