JavaScript - 更新进度条 - 确保一个函数需要一定的时间

Question

我的页面上有一个简单的进度条。它每秒更新一次(可能有点矫枉过正)，但更新之间没有动画。

目前，更新是这样的: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);
};

http://jsfiddle.net/VFx3L/1/

理想情况下，我希望从一个值更新到另一个值需要一秒钟。谁能指出我正确的方向？

Answer 1

只需减少更新以添加 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/

谢谢

亚当