jquery“animate”变量值

我需要使用jquery“动画化”变量。

示例:变量值为1. 5秒后该值应为10。 它应该“平稳地”增加。

希望你知道我的意思。

谢谢!

您需要的是$().animate函数中的step参数。

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

演示

尝试:

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

表示

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

演示

这应该适合你:

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

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

使用setTimeout递增

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

Html标记为
HTML

 1 

您可以在5秒后更改其值。
JQuery的:

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

这是一个演示http://jsfiddle.net/Simplybj/Fbhs9/

作为Ties回答的补充 – 你没有事件需要将虚拟元素附加到DOM。 我是这样做的:

 $.fn.animateValueTo = function (value) { var that = this; $('') .css('display', 'none') .css('letter-spacing', parseInt(that.text())) .animate({ letterSpacing: value }, { duration: 1000, step: function (i) { that.text(parseInt(i)); } }); return this; };