jquery “animate” variable value

Question

I need to \"animate\" a variable with jquery.

Example: The variable value is 1. The value should be 10 after 5 seconds. It should be increase \"smoothl

Answer 1

try:

$({someValue: 0}).animate({someValue: 10}, {
    duration: 5000,
    step: function() { 
        $('#el').text(Math.ceil(this.someValue));
    }
});

<div id="el"></div>

Answer 2

increment with setTimeout

x = 1

for(i=0;i<1000;i+=100){
  setTimeout(function(){
    console.log(x++)
  },i)
}

Answer 3

This should work for you:

var a = 1;
var b = setInterval(function() {
  console.log(a);
  a++;
  if (a == 10) { clearInterval(b); }
}, 500);

Answer 4

What you require is the step parameter in the $().animate function.

var a = 1;
jQuery('#dummy').animate({ /* animate dummy value */},{
    duration: 5000, 
    step: function(now,fx){ 
        a = 1 + ((now/100)*9); 
    }
});

demo

Answer 5

As addition to Ties answer - you dont event need to append dummy element to the DOM. I do it like this:

$.fn.animateValueTo = function (value) {

    var that = this;

    $('<span>')
        .css('display', 'none')
        .css('letter-spacing', parseInt(that.text()))
        .animate({ letterSpacing: value }, {
            duration: 1000,
            step: function (i) {
                that.text(parseInt(i));
            }
        });

    return this;
};

Answer 6

var snail = {speed:0};
$(snail).animate({speed: 10}, 5000);

demo