这是我的代码: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
够公平了吧?但是,问题是,一个数字可以多次做动画,而另一个数字不能做。
喜欢:如果我向下滚动到中间的数字,它就会播放动画。
然后,我没有滚动到底部,而是向上滚动然后再次向下滚动。 然后中间的数字再次做动画,但底部的数字不这样做。
最佳答案
好吧,如果我没理解错的话——您希望每个评分计数器在屏幕上首次显示时动画一次。要实现这一点,您所要做的就是从函数 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>
关于javascript - 如何在滚动上只制作 1 次动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44746654/