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 doc只能有一个doc的id - 你有jquery中提到的#roll-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));
        }
    });
   });
}

每个（）只到达一个元素

2 个答案: