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