我有一个函数可以触发数字从 0 滚动到 X。我还让它仅在我将鼠标悬停在特定的 DIV 上时启动。一切正常。
但是我希望每个数字一个接一个地滚动。
第一个,下一个,下一个,下一个等等
我如何在这段代码中实现它
$( ".skaic" ).one( "click mouseover", function() {
$('.Count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
标记:
<div class="skaic">
<span class="Count">5</span>
<span class="Count">2</span>
<span class="Count">12</span>
</div>
最佳答案
你可以在循环中添加一个延迟
$(".skaic").one("click mouseover", function() {
$('.Count').each(function(i) {
$(this).prop('Counter', 0).delay(i*3000).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
});
.Count {
display: block;
font-size : 30px;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skaic">
<span class="Count">5</span>
<span class="Count">2</span>
<span class="Count">12</span>
</div>
关于javascript - jQuery/JS 滚动数字一个一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40656217/