javascript - 如何在滚动上只制作 1 次动画

Question

这是我的代码:fiddle

const ratingcount = document.querySelectorAll('.ratingcount');
const totalratingcounter = ratingcount.length;

var stopNow = totalratingcounter

countEach()
$(window).on('scroll', function(e) {
      countEach()
})

function countEach() {
    $('.ratingcount').each(function() {
        if (showOnScreen(this) && $(this).attr('show') != 'false' && stopNow != 0) {
            console.log($(this).text())
            console.log($(this).attr('show'))
            $(this).attr('show', 'false')
            numberAnimate(this)
            stopNow = stopNow - 1;
        } else if (!showOnScreen(this)) {
            $(this).attr('show', 'true')
        }
    })
}

function showOnScreen(target) {

    if ($(window).scrollTop() + $(window).height() >= $(target).offset().top)
      return true;
    else
        return false;
}

function numberAnimate(target) {
    var $this = $(target);
    jQuery({
        Counter: 0
    }).animate({
        Counter: $this.text()
    }, {
        duration: 1000,
        easing: 'swing',
        step: function() {
            $this.text(this.Counter.toFixed(1));
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
Follow my steps, Scroll down to middle
</h1>
<span class="ratingcount">5.6</span><br/>
<span class="ratingcount">5.6</span>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<span class="ratingcount">5.6</span><br/>
<span class="ratingcount">5.6</span>
<h1>NOW SCROLL UP AGAIN and  then scroll down 
</h1>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<h1>
Now see this is not working 
</h1>
<span class="ratingcount">5.6</span><br/>
<span class="ratingcount">5.6</span>

问题。

const ratingcount = document.querySelectorAll('.ratingcount');
const totalratingcounter = ratingcount.length;

此代码计算ratingcount类的数量。

并且此代码在执行等于类数的动画后停止动画

var stopNow = totalratingcounter

够公平了吧？但是，问题是，一个数字可以多次做动画，而另一个数字不能做。

喜欢:如果我向下滚动到中间的数字，它就会播放动画。

然后，我没有滚动到底部，而是向上滚动然后再次向下滚动。然后中间的数字再次做动画，但底部的数字不这样做。

Answer 1

好吧，如果我没理解错的话——您希望每个评分计数器在屏幕上首次显示时动画一次。要实现这一点，您所要做的就是从函数 countEach() 中删除 else if() {...}，正如我在下面所做的那样:

const ratingcount = document.querySelectorAll('.ratingcount');
const totalratingcounter = ratingcount.length;

var stopNow = totalratingcounter

countEach()
$(window).on('scroll', function(e) {
      countEach()
})

function countEach() {
    $('.ratingcount').each(function() {
        if (showOnScreen(this) && $(this).attr('show') != 'false' && stopNow != 0) {
            //console.log($(this).text())
            //console.log($(this).attr('show'))
            $(this).attr('show', 'false')
            numberAnimate(this)
            stopNow = stopNow - 1;
        }/* else if (!showOnScreen(this)) {
            $(this).attr('show', 'true')
        }*/
    })
}

function showOnScreen(target) {

    if ($(window).scrollTop() + $(window).height() >= $(target).offset().top)
      return true;
    else
        return false;
}

function numberAnimate(target) {
    var $this = $(target);
    jQuery({
        Counter: 0
    }).animate({
        Counter: $this.text()
    }, {
        duration: 1000,
        easing: 'swing',
        step: function() {
            $this.text(this.Counter.toFixed(1));
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
Follow my steps, Scroll down to middle
</h1>
<span class="ratingcount">5.6</span><br/>
<span class="ratingcount">5.6</span>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<span class="ratingcount">5.6</span><br/>
<span class="ratingcount">5.6</span>
<h1>NOW SCROLL UP AGAIN and  then scroll down 
</h1>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<h1>
Now see this is not working 
</h1>
<span class="ratingcount">5.6</span><br/>
<span class="ratingcount">5.6</span>