CODEWITHSUNDEEP
jqueryanimation
Mats
Mats

Reputation: 557

jQuery Count Numbers Up

I'm not any good at javascript, but I'd love to have a nice little animation that counts a number upwards. I've found this on Github, but it's way to slow. (I'm counting a number with 10 decimals). Anyone got any tips on how to modify it, so it counts quicker? (I've tried to decrease the data-interval, but it sort of stagnates at "0".

<p class="counter" data-interval="0" data-format="999999" data-stop="193847"></p>

Upvotes: 2

Views: 22352

Answers (6)

Shankar Prakash G
Shankar Prakash G

Reputation: 1129

This will help you and simple too, You can change speed by changing duration and change starting number by changing Counter : 0

$('.count').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.attr('data-stop') }, {
    duration: 1000,
    easing: 'swing',
    step: function (now) {
      $this.text(Math.ceil(now));
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="count" data-stop="193847">193847</span>
<br/>
<span class="count" data-stop="190">190</span>
<br/>
<span class="count" data-stop="1938">1938</span>

Upvotes: 6

Opcrat
Opcrat

Reputation: 191

If someone wants to increase counter with certain increment then use,

// HTML

<span class="stat-count">10000</span>

// JS

$(function() {
    function count($this){
        var current = parseInt($this.html(), 10);
        current = current + 50; /* Where 50 is increment */

    $this.html(++current);
    if(current > $this.data('count')){
        $this.html($this.data('count'));
    } else {    
        setTimeout(function(){count($this)}, 5);
    }
}        

$(".stat-count").each(function() {
  $(this).data('count', parseInt($(this).html(), 10));
  $(this).html('0');
  count($(this));
 });

});

Jquery count numbers on page load with certain limit, counting time and counting increment.

Upvotes: 0

mattwad
mattwad

Reputation: 1990

You don't need a jQuery plugin, just use .animate:

jQuery('.counter').each(function(){
  var $elm = this;
  var from = {property: 0};
  var to = {property: $elm.data('stop')};
  var duration = $elm.data('duration');

  jQuery(from).animate(to, {
      duration: duration,
      step: function() {
          $elm.html(this.property);
      }
  });
});

Tip: You can optimize jQuery's framerate by setting jQuery.fx.interval, by default it is 13 (ms).

For more examples: http://james.padolsey.com/javascript/fun-with-jquerys-animate/

Upvotes: 2

Mats
Mats

Reputation: 557

I found the perfect solution:

https://github.com/mhuggins/jquery-countTo

Upvotes: 5

John Boker
John Boker

Reputation: 83729

Lets say you wanted to count up to 200,000 in 5 seconds.

that would be 40,000 increments a second or 40,000 in 60,000 milliseconds, which would be an interval of 1.5 ms per iteration.

Most likely any browser you're using wont be able to handle that kind of interval. The best way to do this would probably determine how fast you want it to count to your end value and change the step so you can get there in the correct amount of time given a more sane interval.

for example, say 5000ms is how long you want it to take and you want your interval to be 20ms.

given that you have 5000/20 or 250 steps. you would have to count by 200000/250 or 800 to get to your ending value in 5 seconds.

Upvotes: 3

nick danvery
nick danvery

Reputation: 41

From the plugin you've posted, there seems to be an option named interval. Default is 1000 ms, try to decrease it so it counts faster.

Something like that should do the trick : 

<span></span>

<script>
$('span').addClass('counter counter-analog')
         .counter({
   // several options here
    interval: 1,
    });

</script>

Hope it helps!

Upvotes: 0

Related Questions