Jquery - Анимированные числа из ответа Ajax

Question

Мой PHP-скрипт возвращает этот JSON

{number: "13", data: "930", test: "3", invoice: "100"}

Я бы хотел, чтобы эти числа отображались с анимацией (переход от 0 к номеру) в 4 различных делениях следующим образом:

<div id="1m" class="count">13</div>
<div id="2t" class="count">930</div>
<div id="3d" class="count">3</div>
<div id="4a" class="count">100</div>

Но я не могу создать цикл, чтобы каждая информация автоматически переходила в нужное место

Вот начало моего javascript, на данный момент есть только data.number, который вставлен в каждый div

$.ajax({
  url: 'example.php',
  success: function(data) {
    console.log(data)
    $('.count').each(function() {
      $(this).prop('Counter', 0).animate({
        Counter: data.number
      }, {
        duration: 100,
        easing: 'swing',
        step: function(now) {
          $(this).text(Math.ceil(now));
        }
      });
    });

  },
  dataType: 'json'
});

Answer 1

Используйте .animate () для анимации значений.

С динамическими данными

const data = {number: "13", data: "930", test: "3", invoice: "100"};

$.each(data, function(index, value) {

  const $this = $('<div />', {
        "class": 'count',
        text: value });

  $('#main').append($this);

    jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      $this.text(Math.ceil(this.Counter));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main" />

со статическими данными

$('.count').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      $this.text(Math.ceil(this.Counter));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1m" class="count">13</div>
<div id="2t" class="count">930</div>
<div id="3d" class="count">3</div>
<div id="4a" class="count">100</div>

Answer 2

Если бы вы дали каждому элементу атрибут data, который связывает его с правильным свойством объекта data, вы могли бы повторно использовать ваш цикл.

т.е:.

<div id="1m" data-prop="number" class="count">
<!--           ⬆  ⬆  ⬆  ⬆  ⬆               -->

const data = { number: "13", data: "930", test: "3", invoice: "100" };

$('.count').each(function() {
  const prop = $(this).data("prop");     //Get the element's data-prop
  $(this).prop('Counter', 0).animate({
    Counter: data[prop]                  //Use that property
  }, {
    duration: 500,
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1m" data-prop="number" class="count"></div>
<div id="2t" data-prop="data" class="count"></div>
<div id="3d" data-prop="test" class="count"></div>
<div id="4a" data-prop="invoice" class="count"></div>

Answer 3

Я предлагаю вам функцию ванильного JavaScript:

• element - это элемент DOM, содержащий ваш номер.
• start - с какого номера начинается счетчик.
• end - от какого числа счетчик останавливается.
• delay - задержка изменения номера. По умолчанию 10 мс.
• step - это число, которое будет добавлено к текущему номеру. По умолчанию 1.

animateNumber(document.querySelector('.animated'), 0, 5, 100);
animateNumber(document.querySelector('.fast-animated'), 0, 100, 10, 2);

function animateNumber(element, start, end, delay = 10, step = 1) {
  let current = start,
    interval = null;

  element.innerText = start;
  
  interval = setInterval(() => {
    current += step;
    element.innerText = current;
  
    if (current === end) {
      clearInterval(interval);
      
      interval = null;
    }
  }, delay);
}

<div class="animated">0</div>
<div class="fast-animated">0</div>

Answer 4

Я думаю, вы должны использовать это - https://inorganik.github.io/countUp.js

$.ajax({
      url: 'example.php',
      success: function(data) {
        let number = new CountUp('number', data.number).start();
        let data = new CountUp('data', data.data).start();
        let test = new CountUp('test', data.test).start();
        let invoice = new CountUp('invoice', data.invoice).start();
      },
      dataType: 'json'
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1m" class="count" id="number">13</div>
<div id="2t" class="count" id="data">930</div>
<div id="3d" class="count" id="test">3</div>
<div id="4a" class="count" id="invoice">100</div>