Счетчик анимированных чисел jQuery от нуля до процентного значения

Я работаю над проектом, в котором хочу добавить анимированный числовой счетчик jQuery от нуля до процентного значения - анимация Javascript на странице результатов, значения являются динамическими из базы данных?

function timer() {
  if (animator.curPercentage < animator.targetPercentage) {
    animator.curPercentage += 1;
  } else if (animator.curPercentage > animator.targetPercentage) {
    animator.curPercentage -= 1;
  }

  $(animator.outputSelector).text(animator.curPercentage + "%");

  if (animator.curPercentage != animator.targetPercentage) {
    setTimeout(timer, animator.animationSpeed)
  }
}

function PercentageAnimator() {
  this.animationSpeed = 50;
  this.curPercentage = 0;
  this.targetPercentage = 0;
  this.outputSelector = ".countPercentage";

  this.animate = function(percentage) {
    this.targetPercentage = percentage;
    setTimeout(timer, this.animationSpeed);
  }
}

var animator = new PercentageAnimator();
animator.curPercentage = 40;
animator.animate(70);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="countPercentage">98%</span>
<span class="countPercentage">92%</span>
<span class="countPercentage">12%</span>
<span class="countPercentage">67%</span>

Проблема в том, что функция jQuery PercentageAnimator работает, но только до 70?

Как получить динамическое значение каждого класса countPercentage в animator.animate(70) вместо 70

Полный код Jsfiddle

https://jsfiddle.net/fdharsi/bx9pbLpd/10/

Проблема устранена. Здесь обновлен jsfiddle

https://jsfiddle.net/fdharsi/bx9pbLpd/11/

timer html jquery counter animator
person Community    schedule 16.03.2018    source источник
comment
Будет здорово, если вы предоставите минимальный, полный и проверяемый пример.   -  person rrk    schedule 16.03.2018
comment
это простой код HTML и jquery   -  person    schedule 16.03.2018

Ответы (1)


arrow_upward
0
arrow_downward

Ну, вы можете просто обернуть свои элементы <span> в div с классом, например:

<div class='percents'>
    <span class="countPercentage" data-value=98">98%</span>
    <span class="countPercentage" data-value=92">92%</span>
    <span class="countPercentage" data-value=12">12%</span>
    <span class="countPercentage" data-value=67">67%</span>
</div>

И тогда вы можете просто перебирать дочерние элементы этого div с помощью JQuery следующим образом:

$('.percents').children().each(function() {
    animator.animate($(this).data('value'));
});

Возможно, вы даже сможете просто сделать $('.countPercentage').each(), но я не проверял...

Однако это, вероятно, не то, как вы должны это делать... Что именно вы хотите сделать?

person Théo Morales    schedule 16.03.2018
comment
проверьте полный исходный код jquery jsfiddle.net/fdharsi/bx9pbLpd/2 - person ; 16.03.2018
comment
да, мне нужен этот тип кода, но пожалуйста, проверьте, как я встраиваю его в функцию jquery? jsfiddle.net/fdharsi/bx9pbLpd/10 - person ; 16.03.2018