jquery "animar" valor variable

Question

Necesito "animar" una variable con jquery.

Ejemplo: El valor de la variable es 1. El valor debe ser de 10 después de 5 segundos. Debe aumentar "sin problemas".

Espero que sepas a qué me refiero.

¡Gracias!

Answer 1

Lo que se necesita es el parámetro de paso en elfunción.

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

demo

Answer 2

Uso 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*/} 

Answer 3

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

Answer 4

incremento con setTimeout

x = 1 

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

Answer 5

Esto debería funcionar para usted:

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

Answer 6

marca HTML como
HTML

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

Puede cambiar su valor después de 5 segundos.
JQuery:

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

He aquí una demostración http://jsfiddle.net/Simplybj/Fbhs9/

Answer 7

intento:

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

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

Answer 8

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

demo

Answer 9

Como complemento a la respuesta de lazos, no es necesario agregar un elemento ficticio al DOM. Lo hago así:

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