javascript jquery“动画”变量值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12317523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery "animate" variable value
提问by mstuercke
I need to "animate" a variable with jquery.
我需要使用 jquery 为变量“设置动画”。
Example:The variable value is 1. The value should be 10 after 5 seconds. It should be increase "smoothly".
示例：变量值为 1。5 秒后该值应为 10。它应该是“平稳地”增加。
Hope that you know what I mean.
希望你知道我的意思。
Thank you!
谢谢！
采纳答案by Ties
What you require is the step parameter in the $().animatefunction.
您需要的是$().animate函数中的 step 参数。
var a = 1;
jQuery('#dummy').animate({ /* animate dummy value */},{
duration: 5000,
step: function(now,fx){
a = 1 + ((now/100)*9);
}
});
回答by Sudhir Bastakoti
try:
尝试：
$({someValue: 0}).animate({someValue: 10}, {
duration: 5000,
step: function() {
$('#el').text(Math.ceil(this.someValue));
}
});
<div id="el"></div>
回答by Eru
This should work for you:
这应该适合你：
var a = 1;
var b = setInterval(function() {
console.log(a);
a++;
if (a == 10) { clearInterval(b); }
}, 500);
回答by ilian6806
As addition to Ties answer - you dont event need to append dummy element to the DOM. I do it like this:
作为 Ties 答案的补充 - 您不需要将虚拟元素附加到 DOM。我这样做：
$.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;
};
回答by mesimplybj
Html mark up as
Html
Html 标记为
Html
<span id="changeNumber">1</span>
You can change its value after 5 seconds.
JQuery:
您可以在 5 秒后更改其值。
查询：
setInterval(function() {
$('#changeNumber').text('10');
},5000);
Here is a Demo http://jsfiddle.net/Simplybj/Fbhs9/
回答by gabitzish
Use setInterval :
使用 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*/}
回答by kannix
?var blub = 1;
setTimeout(function () {
blub = 10;
}, 5000);
回答by Billy Moon
increment with setTimeout
递增 setTimeout
x = 1
for(i=0;i<1000;i+=100){
setTimeout(function(){
console.log(x++)
},i)
}
