Question

我正在制作动画进度条。它的代码很简单，但问题是我无法弄清楚如何避免重复一些jQuery代码，你可以在这个小提琴中看到它：

基本上，这就是重复：

$('.bar-value').animate({width: '+=1%'},50,function(){
    var percent = $('.bar-value').width() / $('.bar-value').parent().width()*100;
    var percInt = parseInt(percent);
    $('.progress').text(percInt+"%");
});

只是将内部div（进度）的宽度增加1％，并将.progress跨度数增加1.有没有办法在不重复该代码的情况下做我想做的事情？

提前致谢！

Answer 1

只需提供您想要动画的持续时间和金额：

$('.bar-value').animate({width: '+=100%'},2000,function(){
    var percent = $('.bar-value').width() / $('.bar-value').parent().width()*100;
    var percInt = parseInt(percent);
    $('.progress').text(percInt+"%");
});

Answer 2

使用递归：

function showProgress(finish) {
    $('.bar-value').animate({
        width: '+=1%'
    }, 50, function () {
        var percent = $('.bar-value').width() / $('.bar-value').parent().width() * 100;
        var percInt = parseInt(percent);
        $('.progress').text(percInt + "%");

        if (percInt != 100) {
            showProgress(finish);
        } else {
            if (finish) finish();
        }
    });
}

Fiddle

编辑：修复

Answer 3

当然，那段代码很疯狂!!

所以我建议你使用jQuery UI progress bar

否则你可以使用循环来完成你想要实现的目标：

http://jsfiddle.net/db306/N6c2q/3/

$(document).ready(function(){
    var percent = $('.bar-value').width() / $('.bar-value').parent().width()*100;
    $('.progress').text(percent+"%");

    $('button').click(function(){
        $('.loader').fadeIn(1200);
        $('button').attr('disabled','disabled');


        for (var i=0; i<100;i++){
            $('.bar-value').animate({width: '+=1%'},50,function(){
            var percent = $('.bar-value').width() / $('.bar-value').parent().width()*100;
            var percInt = parseInt(percent);
            $('.progress').text(percInt+"%");
        });
        }
    });
});

避免jQuery代码重复

3 个答案: