Avoid jQuery code repeat

Question

i am making an animated progress bar. It's code is quite simple but the problem is that I can't figure out how to avoid repeating some jQuery code, you can see it in this Fiddle:

http://jsfiddle.net/N6c2q/

basically, this is what repeats:

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

that just increases the width of the inner div (progress) by 1%, and increases .progress span number by 1. Is there any way to do what i'm trying to do without repeating that code?

Thanks in advance!

Have you looked into the jQuery UI progressbar?

royhowie
– royhowie

2014-05-05 00:57:06 +00:00
Commented May 5, 2014 at 0:57 — royhowie
– royhowie, Commented May 5, 2014 at 0:57
You can just wrap that bit in a for loop.

Jane S
– Jane S

2014-05-05 00:57:19 +00:00
Commented May 5, 2014 at 0:57 — Jane S
– Jane S, Commented May 5, 2014 at 0:57
@Luxelin haha yess but i like doing things by myself

mrpinkman
– mrpinkman

2014-05-05 00:59:33 +00:00
Commented May 5, 2014 at 0:59 — mrpinkman
– mrpinkman, Commented May 5, 2014 at 0:59
See Darius's response below :)

Jane S
– Jane S

2014-05-05 01:02:23 +00:00
Commented May 5, 2014 at 1:02 — Jane S
– Jane S, Commented May 5, 2014 at 1:02

Darius Houle · Accepted Answer · 2014-05-05 01:07:43Z

6

Just give duration and amount you'd like to animate:

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

edited May 5, 2014 at 1:07

answered May 5, 2014 at 1:00

Darius Houle

4653 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

cookie monster Over a year ago

I really doubt that this is correct. If there's a progress for every bar-value, then this isn't right at all. He's already looping when he calls .animate().

Darius Houle Over a year ago

True statement cookie monster, I didn't look at that close enough! No need to loop at all. Just animate from 0-100% and set an appropriate duration.

mrpinkman Over a year ago

hey , it worked, but, how can i ejecute a function after the loop finished?

cookie monster Over a year ago

@DariusHoule: I think you're right now. I couldn't tell what he meant by repeating, but it seems he just doesn't know how animate works.

cookie monster Over a year ago

@user3597089: Here's a fixed up version that builds on the changes Darius made. jsfiddle.net/N6c2q/4

|

Tiago Marinho · Accepted Answer · 2014-05-05 01:08:45Z

1

Use recursion:

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

Edit: fix

edited May 5, 2014 at 1:08

Tiago Marinho

2,2461 gold badge22 silver badges38 bronze badges

answered May 5, 2014 at 1:00

Jefraim

1939 bronze badges

5 Comments

Jane S Over a year ago

Why use recursion when you can do it more elegantly using iteration?

Jefraim Over a year ago

Recursion is more elegant to me.

Jane S Over a year ago

Until you run out of memory. Iteration is almost always better if you can use it.

royhowie Over a year ago

If you're going to talk about elegance, format your code correctly.

Tiago Marinho Over a year ago

You are welcome. Note that you can re-indent messy code using jsbeautifier.org or jsfiddle.net, and format it in an answer or question by selecting your code and then clicking in the {} icon in the formatting bar.

db306 · Accepted Answer · 2014-05-05 01:08:46Z

Of course, that code is madness!!

So I would recommend you to use jQuery UI progress bar

Otherwise you can use a loop to do what you are trying to achieve:

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+"%");
        });
        }
    });
});

Collectives™ on Stack Overflow

Avoid jQuery code repeat

3 Answers 3

10 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related