Albus One Albus One - 17 days ago 6
Javascript Question

jQuery / JS rolling numbers one by one

i have a function which fires numbers to roll from 0 to X. i also made it to start only when i mouseover on specific DIV. all works fine.

however i want each number to roll separately one after another.

first, next, next, next etc.

how do i implement it it to this code

$( ".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));
}
});
});
});


Markup:

<div class="skaic">
<span class="Count">5</span>
<span class="Count">2</span>
<span class="Count">12</span>
</div>

Answer

You can add a delay in the loop

$(".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>

Comments