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 "smoothly".

Hope that you know what I mean.

Thank you!

do you want to keep on incrementing this variable after fixed time?? — Sibu, Sep 07 '12 at 11:59
You have an elegant solution here http://stackoverflow.com/a/9324325/607874 — Jose Rui Santos, Feb 07 '13 at 08:36

score 25 · Answer 1 · answered Sep 07 '12 at 12:07

25

try:

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

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

answered Sep 07 '12 at 12:07

Sudhir Bastakoti

99,167
15
158
162

nice i didn't know you could do it this way, i knew about the step function (as you can see in my answer) but this is good stuff! remove the `Math.ceil` and you're golden :) – Ties Sep 07 '12 at 12:10
@Ties Math.ceil is used in this case so that its rounded up to upper value, else you'd be getting 9.99858544, etc – Sudhir Bastakoti Sep 07 '12 at 12:13
2

yeah but you lose the smoothness, you can add a `complete` parameter to finish it – Ties Sep 07 '12 at 12:20

Ties · Accepted Answer · 2012-09-07T12:07:39.203

13

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

edited Sep 07 '12 at 12:07

answered Sep 07 '12 at 11:56

Ties

5,726
3
28
37

The solution is ok. The problem is it's very slow. – Eru Sep 07 '12 at 14:02
2

@Ties +1 It works, but you really don't need to bind the animation to a dummy HTML element. See my answer in http://stackoverflow.com/a/9324325/607874 – Jose Rui Santos Mar 06 '13 at 12:41
@JoseRuiSantos i know, the answer Sudhir gave is probably the best answer. – Ties Mar 18 '13 at 14:12

score 11 · Answer 3 · 2014-03-07T13:14:15.253

11

representation

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

demo

edited Mar 07 '14 at 13:14

answered Mar 07 '14 at 12:55

score 2 · Answer 4 · edited Sep 07 '12 at 12:12

2

This should work for you:

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

edited Sep 07 '12 at 12:12

Stano

8,749
6
30
44

answered Sep 07 '12 at 11:54

Eru

675
4
8

2

jup made a similar [fiddle](http://jsfiddle.net/Fbhs9/2/) note that the timing won't be 100% accurate but that might be not a big problem depending on the case :) – VDP Sep 07 '12 at 12:19

score 0 · Answer 5 · answered Sep 07 '12 at 11:51

Use setInterval :

percentage = 0;
startValue = 1;
finishValue = 5;
currentValue = 1;
interval = setInterval(function(){ 
   percentage ++; 
   currentValue = startValue + ((finishValue - startValue) * percentage) / 100;
   doSomething(currentValue);
   if (percentage == 100) clearInterval(interval);
 }, duration / 100)

function doSomething(val) { /*process value*/}

score 0 · Answer 6 · edited Sep 07 '12 at 12:00

0

Html mark up as
Html

<span id="changeNumber">1</span>

You can change its value after 5 seconds.
JQuery:

setInterval(function() {        
        $('#changeNumber').text('10');
    },5000);

Here is a Demo http://jsfiddle.net/Simplybj/Fbhs9/

edited Sep 07 '12 at 12:00

4b0

21,981
30
95
142

answered Sep 07 '12 at 11:57

mesimplybj

639
1
5
28

in this example you can better use `setTimeout`. You set it to 10 every 5 seconds now... (while it already is 10) – VDP Sep 07 '12 at 12:04

score 0 · Answer 7 · answered May 29 '15 at 08:32

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

score 0 · Answer 8 · answered Sep 04 '21 at 19:20

Try this:

var varToAnimate = 1;
$(window).animate({
    varToAnimate: 10
}, 5000);

Note: This only works if the variable was set with var varToAnimate or window.varToAnimate.

When you set a variable, it creates a property in the window object. jQuery.animate() animates properties, so $(window) gets the window object, and varToAnimate: 10 animates the window's varToAnimate property to 10.

score -1 · Answer 9 · answered Sep 07 '12 at 11:52

-1

var blub = 1;
setTimeout(function () {
    blub = 10;
}, 5000);

answered Sep 07 '12 at 11:52

kannix

5,107
6
28
47

Ahahahhahahahhahahahha, that is so funny! +1 – Feb 16 '16 at 20:34

score -1 · Answer 10 · answered Sep 07 '12 at 11:53

-1

increment with setTimeout

x = 1

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

answered Sep 07 '12 at 11:53

Billy Moon

57,113
24
136
237

jquery "animate" variable value

10 Answers10

Linked