jQueryUI 进度条

【问题标题】：jQueryUI Progress BarjQueryUI 进度条
【发布时间】：2012-09-04 14:23:30
【问题描述】：

我从未使用过 jQuery UI 进度条，但我想制作一个基本上会加载 jQuery UI 进度条的函数，运行 5 秒，然后执行另一个函数。

即。

function test() {

show the jQuery UI progress bar for 5 seconds in div ("progressbar")

after 5 seconds has passed..... execute test2()

}

如何做到这一点？

【问题讨论】：

标签： javascript jquery jquery-ui progress-bar javascript-framework

【解决方案1】：

你可以这样做：

<button onclick="test()">Test</button>
<div id="progress"></div>

带动画：

function test(){
    var per = 0;
    progress(per);
    time = setTimeout(function(){ animate(per); }, 1000);
    setTimeout(function(){ $( "#progress" ).hide(); test2(); }, 5000);

}

function animate(per){

    clearTimeout(time);
    per = per+20;
    progress(per);

    time = setTimeout(function(){ animate(per); }, 1000);
}

function test2(){
    alert('test2');
}
function progress(per){
    $( "#progress" ).progressbar({
        value: per
    });        
}

JSFiddle Example

【讨论】：