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!
3
-
do you want to keep on incrementing this variable after fixed time??Sibu– Sibu2012-09-07 11:59:49 +00:00Commented Sep 7, 2012 at 11:59
-
It should be increase "smoothly". I forgot to say it...mstuercke– mstuercke2012-09-07 12:03:16 +00:00Commented Sep 7, 2012 at 12:03
-
You have an elegant solution here stackoverflow.com/a/9324325/607874Jose Rui Santos– Jose Rui Santos2013-02-07 08:36:58 +00:00Commented Feb 7, 2013 at 8:36
Add a comment
|
10 Answers
try:
$({someValue: 0}).animate({someValue: 10}, {
duration: 5000,
step: function() {
$('#el').text(Math.ceil(this.someValue));
}
});
<div id="el"></div>
3 Comments
Ties
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 :)
Sudhir Bastakoti
@Ties Math.ceil is used in this case so that its rounded up to upper value, else you'd be getting 9.99858544, etc
Ties
yeah but you lose the smoothness, you can add a
complete parameter to finish itWhat 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);
}
});
3 Comments
Eru
The solution is ok. The problem is it's very slow.
Jose Rui Santos
@Ties +1 It works, but you really don't need to bind the animation to a dummy HTML element. See my answer in stackoverflow.com/a/9324325/607874
Ties
@JoseRuiSantos i know, the answer Sudhir gave is probably the best answer.
This should work for you:
var a = 1;
var b = setInterval(function() {
console.log(a);
a++;
if (a == 10) { clearInterval(b); }
}, 500);
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*/}
Comments
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/
1 Comment
VDP
in this example you can better use
setTimeout. You set it to 10 every 5 seconds now... (while it already is 10)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;
};
Comments
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.
Comments
var blub = 1;
setTimeout(function () {
blub = 10;
}, 5000);
increment with setTimeout
x = 1
for(i=0;i<1000;i+=100){
setTimeout(function(){
console.log(x++)
},i)
}
