Question

我的页面上有一个简单的进度条。它每秒更新一次（可能过度杀伤），但更新之间没有动画。

目前，更新内容如下：10％ - ＆gt; 15％ - ＆gt; 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
});

查看新小提琴http://jsfiddle.net/72SG9/

由于

亚当

JavaScript - 更新进度条 - 确保函数花费一些时间

1 个答案: