jQuery compteur de nombres animés de zéro à la valeur

this à l'intérieur de l'étape de rappel n'est pas l'élément, mais l'objet passé en animate()

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

une Autre façon de faire et de garder les références 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

IMPORTANT: cela ressemble à une petite différence mais vous devriez vraiment utiliser un attribut de données pour tenir le nombre original pour compter jusqu'à. Modifier le numéro d'origine peut avoir des conséquences inattendues. Par exemple, je fais tourner cette animation chaque fois qu'un élément entre dans l'écran. Mais si l'élément qui entre, sort, puis entre à l'écran une seconde fois avant la première animation est terminée, il comptera jusqu'à la mauvaise nombre.

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

Vous pouvez obtenir de l'élément lui-même dans .each(), essayez ceci au lieu d'utiliser 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));
        }
    });
});

ce que fait le code, c'est que le nombre 8000 compte de 0 à 8000. Le problème est qu'il est placé au milieu d'une page assez longue, et une fois que l'utilisateur fait défiler vers le bas et voit effectivement le nombre, l'animation est déjà dîné. Je voudrais déclencher le compteur, une fois qu'il apparaît dans la fenêtre d'affichage.

JS:

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

Et le code HTML:

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

C'est de travailler pour moi

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

c'est du travail pour moi !

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

Cela a fonctionné pour moi

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

Vous pouvez le faire avec la fonction animate en 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');
   }
});

article complet:

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