javascript - animate - jquery valor de variable "animado"

sliding jquery

Question

Necesito "animar" una variable con jquery.

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

Espero que sepas a qué me refiero.

¡Gracias!

Answer 1

Esto debería funcionar para usted:

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

Answer 2

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

Aquí hay una demo http://jsfiddle.net/Simplybj/Fbhs9/

Answer 3

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

Answer 4

incremente con setTimeout

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

Answer 5

tratar:

$({someValue: 0}).animate({someValue: 10}, {
duration: 5000,
step: function() {
$(''#el'').text(Math.ceil(this.someValue));
}
});
<div id="el"></div>

Answer 6

Lo que necesita es el parámetro de paso en la función $().animate .

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

manifestación

Answer 7

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

Answer 8

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

manifestación

Answer 9

Como complemento a la respuesta de Ties, 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;
};