Question

我想逐渐为进度条制作动画。当我使用for循环时，进度条消失

<script type="text/javascript">
    $(function() {

        // Set the progressbar's initial value to 76%.
        $("#progressbar1").progressbar({value:7});

        // Set the progressbar's value to 18%.
        $("#button1").click(function() {            
            $("#progressbar1").progressbar("option", "value", 18);          
        });

        // Increment the progressbar's current value by 10%.
        $("#button2").click(function() {
            var val = $("#progressbar1").progressbar("option", "value");
        });

        // Decrement the progressbar's current value by 10%.
        $("#button3").click(function() {
            var val = $("#progressbar1").progressbar("option", "value");
            $("#progressbar1").progressbar("option", "value", val-10);
        });
    });
</script>


<input id="button2" type="button" value="Progress" />

因此，当我点击按钮2时，进度条必须逐渐动画。

如果有人帮助我在页面打开时使用onload()函数加载动画，我将更加感谢请帮我逐步设置进度条的动画，并在打开文件时自动加载。

此致

Chandru。

Answer 1

$('#progressbar').progressbar();

$('#button2').click(function(){
    makeProgress($('#progressbar'), 0, 100, 4);
});

function makeProgress(target, start, stop, steps){
    var step = (stop - start)/steps;
    var increment = function(){
        var val = target.progressbar("value");
        target.progressbar("option", "value", val + step);
        if (val + step < stop) setTimeout(increment, 500);
    };
    increment();
}

Answer 2

到目前为止还不是最好的方式（实际上更像是一个hack），但也许你可以查看.animate jQuery函数。使用“虚拟”css属性，它可能看起来像是为了将进度条设置为从0到100的值：

$('#progressbar').animate(
{ dummy: '100' }, 
{ 
  step: function(now,fx) { 
    // set current value
    $('#progressbar').progressbar('value', now); 
  } 
});

编辑：使用jQuery缓动函数之一的示例：http://jsfiddle.net/hPGNE/

使用JQuery进度条的动画

2 个答案: