Анимация чисел jquery?

Question

[lemuriec]

Добрый день!

Помогите пожалуйста с анимацией чисел. Необходимо сделать анимацию чисел как вот на этом сайте https://randstuff.ru/number/ . Именно Чтобы вне зависимости от количества символов цифры выпадали сверху вниз по очереди. как это сделать? метод animate мне не очень помог.

Заранее благодарю.

Answer 1

[Виктор Л]

Ну или так

Comments

[lemuriec]

А как сделать чтобы только сверху вниз крутились? и в вашем примере если меняется только одна цифра то только она и крутится, а надо чтобы крутились все по очереди. Это возможно сделать? Буду очень благодарен

Answer 2

[Сергей Соколов]

У них в коде виджета можно подсмотреть:

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")
})

Разбивают число на цифры, каждую оборачивают в span со стилем позиционирования где-то высоко, по очереди дают эффект .animate() снижающий свойство top до 0.

CSS

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

#RS-number .new span {
    position: relative;
    top: -70px;
}

Comments

[lemuriec]

a.num откуда берется? вместо него я могу допустим свое текстовое значение сделать? Или как то это обернуть все в функцию и давать свои цифры в функцию function(мояЦифра){код}?

[lemuriec]

<script type="text/javascript">
  $(document).ready(function(){
      var a = Number(prompt('Введите число'));
      
      $("#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>

Видимо я не совсем правильно делаю, кнопка не работает так...
У меня первое значение я вручную вбиваю. И оно отражается нормально, а второе по клику на кнопку не появляется вообще.