Question

给定一个变量N，反映了几秒钟，我想让jQueryUI Progressbar从空白平滑地更新到反映在那段时间内的完成。

换句话说，我希望function n_sec_progressbar(n) { ... }显示一个进度条，并且在n秒内，进度条从value 0一致地前进到100。

在我继续开始自己摆弄setTimeout之前，我会感激任何有关此类事情的建议或指示已经完成。

感谢您的阅读。

布赖恩

Answer 1

我认为使用animate() {jQuery核心API}的callback编写自己的自定义进度条会更容易。这样可以最大程度地控制像这样的加载动画。

Answer 2

制作这样的功能

(function( $ ) {
    jQuery.fn.fillProgressBar = function(option){
    var settings = jQuery.extend({
        fromValue : 0,
        toValue : 0,
        interval : 1000
    },option);

    function fillProgressBar(element,initialValue,toValue,interval){
    //  console.log("out "+initialValue);
        if(initialValue<=toValue){
        /*  $j(element).progressbar({
                value : initialValue++
            });*/
            $j(element).progressbar( "value", initialValue++ );
        //  console.log(initialValue);
            setTimeout(function(){
                fillProgressBar(element,initialValue,toValue,interval);
            }, parseInt(interval/toValue));
        //  console.log("in "+initialValue);

        }
    }
    fillProgressBar(this,settings.fromValue,settings.toValue,settings.interval);
    return this;
};})( jQuery );

并拨打电话

$j("#progressBar").progressbar({
    value:0 });

$j("#progressBar").fillProgressBar({toValue : progressBarValue,
    interval : 1000});

在N秒内统一更新jQueryUI Progressbar

2 个答案: