jQuery geanimeerde getallenteller van nul tot waarde

Antwoord 1, autoriteit 100%

Uw thisverwijst niet naar het element in de step-callback, in plaats daarvan wilt u er een verwijzing naar behouden aan het begin van uw functie (verpakt in $thisin mijn voorbeeld):

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

Update: als u decimale getallen wilt weergeven, kunt u in plaats van de waarde af te ronden met Math.ceil, tot 2 decimalen afronden, bijvoorbeeld met value.toFixed(2):

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

Antwoord 2, autoriteit 22%

thisin de stap-callback is niet het element, maar het object dat wordt doorgegeven aan animate()

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

Een andere manier om dit te doen en de verwijzingen naar thiste behouden, is

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

FIDDLE

Antwoord 3, autoriteit 11%

BELANGRIJK: het lijkt een klein verschil, maar je zou echt een data-attribuut moeten gebruiken om het oorspronkelijke getal vast te houden om naar toe te tellen. Het wijzigen van het oorspronkelijke nummer kan onbedoelde gevolgen hebben. Ik laat deze animatie bijvoorbeeld elke keer draaien als er een element op het scherm komt. Maar als het element het scherm binnenkomt, verlaat en een tweede keer het scherm binnengaat voordat de eerste animatie is afgelopen, telt het tot het verkeerde aantal.

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

Antwoord 4, autoriteit 3%

Wat de code doet, is dat het getal 8000 optelt van 0 tot 8000. Het probleem is dat het in het midden van een vrij lange pagina wordt geplaatst, en als de gebruiker eenmaal naar beneden scrolt en het nummer daadwerkelijk ziet, verschijnt de animatie is al aan het dineren. Ik wil de teller activeren zodra deze in de viewport verschijnt.

JS:

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

En HTML:

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

Antwoord 5, autoriteit 3%

Hier is mijn oplossing
en het werkt ook, wanneer het element in de viewport verschijnt

U kunt de code in actie zien door te klikken op jfiddle

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/

Antwoord 6

Je kunt het element zelf ophalen in .each(), probeer dit in plaats van 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));
        }
    });
});

Antwoord 7

Dit werkte voor mij

HTML-CODE

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

jQuery-code

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

Antwoord 8

Je kunt het doen met de animatiefunctie in 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

Antwoord 9

Als je wilt afhandelen op basis van of het int of float is

$(".display-counter").each(function () {
    $(this)
      .prop("Counter", 0)
      .animate(
        {
          Counter: $(this).text()
        },
        {
          duration: 4000,
          easing: "swing",
          step: function (now, tween) {
            // Check added for decimal number
            if(parseInt(tween.end) == parseFloat(tween.end)){
              $(this).text(Math.ceil(now));
            } else{
              $(this).text(now.toFixed(2));
            }
          },
        }
      );
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="display-counter">123</p>
<p class="display-counter">125.3</p>

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

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

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