2014-01-27 6 views
1

У меня есть простой индикатор выполнения на моей странице. Он обновляется каждую секунду (возможно, избыточный), но между обновлениями нет анимации.JavaScript - обновление индикатора выполнения - убедитесь, что функция занимает некоторое время

В настоящее время обновления выглядит следующим образом: 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/

Я бы идеально, как обновление от одного значения к другому, чтобы занять одну секунду. Может кто-то указать мне верное направление?

ответ

2

Просто уменьшить обновление, чтобы добавить 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/

Благодарности

Adam

Смежные вопросы