HTML5进度条动画

Question

我在我的应用程序中使用HTML5进度条.我想知道是否有任何方法可以控制进度条的动画速度.我想在一定的时间间隔后显示进度,我使用javascript的setTimeout方法,以便在屏幕渲染后设置值.但动画太快了.有没有办法控制它？

谢谢.

Answer 1

我不确定我理解"动画"是什么意思,但这里是一个在控制进展速度的同时使用进度条的例子:http://jsfiddle.net/526hM/

HTML:

<progress max="200" value="1"></progress>
<div id="val"></div>

脚本:

$(document).ready(function(){
    var interval = 2, //How much to increase the progressbar per frame
        updatesPerSecond = 1000/60, //Set the nr of updates per second (fps)
        progress =  $('progress'),
        animator = function(){
            progress.val(progress.val()+interval);
            $('#val').text(progress.val());
            if ( progress.val()+interval < progress.attr('max')){
               setTimeout(animator, updatesPerSecond);
            } else { 
                $('#val').text('Done');
                progress.val(progress.attr('max'));
            }
        }

    setTimeout(animator, updatesPerSecond);
});