我的页面上有一个简单的进度条。它每秒更新一次(可能有点矫枉过正),但更新之间没有动画。
目前,更新是这样的:10% -> 15% -> 23% ...等等
我希望进度条更流畅而不是从一个值跳到下一个值
function update() {
current += 10;
// what can I do here to make the animation more fluid?
// so that it looks like 10% -> 11% -> 12%
// similar to 'fast' animation or 'slow' animation
$("progress").val(current);
if (current >= max) clearInterval(interval);
console.log(current);
};
理想情况下,我希望从一个值更新到另一个值需要一秒钟。谁能指出我正确的方向?
最佳答案
只需减少更新以添加 1 而不是 10 这会使步幅更小,然后将间隔减少到 100.. 这会创建一个更流畅的条形图
$(function () {
var current = 0;
var max = 100;
function update() {
current += 1;
// what can I do here to make the animation more fluid?
$("progress").val(current);
if (current >= max) clearInterval(interval);
console.log(current);
};
var interval = setInterval(update, 100); //choose how fast to update
});
查看新的 Fiddle http://jsfiddle.net/72SG9/
谢谢
亚当
关于JavaScript - 更新进度条 - 确保一个函数需要一定的时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21392735/