jQueryUI进度栏 [英] jQueryUI Progress Bar

问题描述

我从未使用过jQuery UI进度栏，但我想制作一个基本上可以加载jQuery UI进度栏，运行5秒钟然后执行另一个功能的函数.

I have never used the jQuery UI progress bar, but I'd like to make a function that would basically load the jQuery UI progress bar, run it for 5 seconds and then execute another function.

即.

function test() {

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

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

}

这怎么办?

推荐答案

您可以这样做:

​<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示例

这篇关于jQueryUI进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！