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

Ответ 1

Ваш 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 вы можете округлить до двух десятичных знаков, например, с помощью value.toFixed(2):

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

Ответ 2

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

FIDDLE

Ответ 3

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

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

Что делает код, так это то, что число 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>

Ответ 5

Вы можете получить элемент в .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));
        }
    });
});

Ответ 6

Вот мое решение, и оно также работает, когда элемент отображается в окне просмотра

var counterTeaserL = $('.go-counterTeaser');
var winHeight = $(window).height();
if (counterTeaserL.length) {
    var firEvent = false,
        objectPosTop = $('.go-counterTeaser').offset().top;

        //when element shows at bottom
        var elementViewInBottom = objectPosTop - winHeight;
    $(window).on('scroll', function() {
        var currentPosition = $(document).scrollTop();
        //when element position starting in viewport
      if (currentPosition > elementViewInBottom && firEvent === false) {
        firEvent = true;
        animationCounter();
      }   
    });
}

//counter function will animate by using external js also add seprator "."
 function animationCounter(){
        $('.numberBlock h2').each(function () {
            var comma_separator_number_step =           $.animateNumber.numberStepFactories.separator('.');
            var counterValv = $(this).text();
            $(this).animateNumber(
                {
                  number: counterValv,
                  numberStep: comma_separator_number_step
                }
            );
        });
    }


https://jsfiddle.net/uosahmed/frLoxm34/9/

Ответ 7

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

<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>

Ответ 8

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

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

Ответ 9

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

HTML CODE

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

Ответ 10

Вы можете сделать это с помощью функции 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');
   }
});

Demo