jQuery анимированный счетчик чисел от нуля до значения

Я создал скрипт для анимации числа от нуля до его значения.

работающего

jQuery

$({ Counter: 0 }).animate({
  Counter: $('.Single').text()
}, {
  duration: 1000,
  easing: 'swing',
  step: function() {
    $('.Single').text(Math.ceil(this.Counter));
  }
});
html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Single">150</span>

Не Работает

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

ниже то, что я пытаюсь, но без успеха, так что далеко:

HTML-код

<span class="Count">200</span>
<span class="Count">55</span>

в jQuery

$('.Count').each(function () {
  jQuery({ Counter: 0 }).animate({ Counter: $(this).text() }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      $(this).text(Math.ceil(this.Counter));
    }
  });
});
25
animation each html javascript jquery

9 ответов

код thisне ссылается на элемент в обратном вызове шага, вместо этого вы хотите сохранить ссылку на него в начале своей функции (завернутый в $thisв моем примере):

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

обновление: если вы хотите отобразить десятичные числа, то вместо округления значения с Math.ceil вы можете округлить до 2 десятичных знаков, например, с value.toFixed(2):

step: function () {
  $this.text(this.Counter.toFixed(2));
}
62

this внутри обратного вызова шага не элемент, а объект, переданный animate ()

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

другой способ сделать это и сохранить ссылки this будет

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

скрипка

16

важно: это похоже на небольшую разницу, но вы действительно должны использовать атрибут данных для хранения исходного числа для подсчета. Изменение исходного номера может иметь непреднамеренные последствия. Например, я запускаю эту анимацию каждый раз, когда элемент входит в экран. Но если элемент входит, выходит, а затем входит в экран во второй раз до завершения первой анимации, он будет считаться неправильным число.

HTML-код:

<p class="count" data-value="200" >200</p>
<p class="count" data-value="70" >70</p>
<p class="count" data-value="32" >32</p>

JQuery:

$('.count').each(function () {
    $(this).prop('Counter', 0).animate({
            Counter: $(this).data('value')
        }, {
        duration: 1000,
        easing: 'swing',
        step: function (now) {                      
            $(this).text(this.Counter.toFixed(2));
        }
    });
});
4

вы можете получить сам элемент .each(), попробуйте это вместо того, чтобы использовать this

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

что делает код, это то, что число 8000 подсчитывает от 0 до 8000. Проблема в том, что он помещается в середине довольно длинной страницы, и как только пользователь прокручивает вниз и фактически видит номер, анимация уже обедает. Я хотел бы запустить счетчик, как только он появится в окне просмотра.

JS:

$('.count').each(function () {
                $(this).prop('Counter',0).animate({
                        Counter: $(this).text()
                }, {
                        duration: 4000,
                        easing: 'swing',
                        step: function (now) {
                                $(this).text(Math.ceil(now));
                        }
                });
            });

и HTML:

 <span class="count">8000</span>
1

это работает для меня 

$('.Count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});
0

Это работа для меня !

<script type="text/javascript">
$(document).ready(function(){
        countnumber(0,40,"stat1",50);
        function countnumber(start,end,idtarget,duration){
            cc=setInterval(function(){
                if(start==end)
                {
                    $("#"+idtarget).html(start);
                    clearInterval(cc);
                }
                else
                {
                   $("#"+idtarget).html(start);
                   start++;
                }
            },duration);
        }
    });
</script>
<span id="span1"></span>
0

это сработало для меня

HTML-КОД 

<span class="number-count">841</span>

код jQuery

$('.number-count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
0

вы можете сделать это с помощью функции Animate в jQuery.

$({ countNum: $('.code').html() }).animate({ countNum: 4000 }, {
    duration: 8000,
    easing: 'linear',
    step: function () {
        $('.yourelement').html(Math.floor(this.countNum));
    },
    complete: function () {
        $('.code').html(this.countNum);
        //alert('finished');
   }
});

полный текст статьи:

http://mishelshaji.co.in/2018/animated-number-counter-using-jquery/

-1