The animation of numbers in jquery?

Good day!

Please help with the animation of numbers. You need to make an animation of the numbers as here on this site https://randstuff.ru/number/ . That is, regardless of the number of characters, figures dropped down from the top of the queue. how to do it? animate method I was not very helpful.

Thank you in advance.
June 3rd 19 at 19:41
2 answers
June 3rd 19 at 19:43
How to do only from the top down spinning? in your example if you change only one digit then only she turns, and it is necessary to twist each one individually. Is it possible? I would be very grateful - Cordell.Schust commented on June 3rd 19 at 19:46
June 3rd 19 at 19:45
They have in the code of the widget you can spy:
var b = String(a.num);
b.split("");
a = '<span class="new">';
for (var e = 0; e < b.length; e++) a += "<span>" + b.charAt(e) + "</span>";
a += "</span>";
d.find(".new").attr("class", "cur");
d.append(a);
d.find(".cur").fadeOut(100, function() {
c(this).remove()
});
e = 1;
d.find(".new span").each(function() {
 c(this).delay(parseInt(150 / b.length) * e++).animate({
 top: 0
 }, "fast")
})


Divide the number on the figures, each wrapped in a span with the style positioning, high turns give the effect .animate() to reduce the property top to 0.

CSS
#RS-number .new {
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
}

#RS-number .new span {
 position: relative;
 top: -70px;
}
a.where did num come from? instead, I can assume its a text value to do? Or something to wrap everything in a function and give its digits in function(moelfre){code}? - Cordell.Schust commented on June 3rd 19 at 19:48
<script type="text/javascript">
$(document).ready(function(){
 var a = Number(prompt('Enter a number'));

$("#number").html(a);
$("button").on('click',function(){
 var b = String("456");
b.split("");
 a = '<span class="new">';
 for (var e = 0; e < b.length; e++) a += "<span>" + b.charAt(e) + "</span>";
 a += "</span>";
 d.find(".new").attr("class", "cur");
d.append(a);
 d.find(".cur").fadeOut(100, function() {
c(this).remove()
});
 e = 1;
 d.find(".new span").each(function() {
 c(this).delay(parseInt(150 / b.length) * e++).animate({
 top: 0
 }, "fast")
 }) 
});
});

</script>

Apparently I'm not quite doing the right thing, the button does not work so...
I have the first value I hand-hammered. And it is reflected normally, and the second by clicking on the button does not appear at all. - Cordell.Schust commented on June 3rd 19 at 19:51

Find more questions by tags AnimationjQueryJavaScriptCSS