Troubles with creating jQuery animation sequence

I am trying to execute an animation sequence on progress bars:

function animateProgress() {
    var params  = [{from: 50, to: 100}, {from: 0, to: 100}, {from: 0, to: 50}];
    animateProgressStep(params, 0);
}

function animateProgressStep(params, i) {
    $(".progress").width(params[i].from).animate({width: params[i].to}, {
        duration: 2000, 
        complete: function() {
            if(i + 1 < params.length) {
                animateProgressStep(params, i + 1);
            } 
        }
    });
}

This works if there is a single bar on the page, but if there are many, it breaks on the second iteration because complete开发者_运维问答 callback is called as many times as there are progress bar elements on the page.

What would be a solution?

Can play with it here: http://jsfiddle.net/TythE/1/

If I don't misunderstand you, you can add a finished property to each param so that it always continues to the next one only once:

function animateProgress() {
    var params  = [{from: 50, to: 100}, {from: 0, to: 100}, {from: 0, to: 50}];
    animateProgressStep(params, 0);
}

function animateProgressStep(params, i) {
    $(".progress").width(params[i].from).animate({width: params[i].to}, {
        duration: 2000, 
        complete: function() {
            if(i + 1 < params.length && !params[i].finished) {
                params[i].finished = true;
                animateProgressStep(params, i + 1);
            } 
        }
    });
}

I hope I'm understanding you correctly:

The animate method is operating on all the elements that have the class progress. Instead of selecting only on the class, why don't you use an ID?

function animateProgressStep(id, params, i) {
    $("#" + id).width(params[i].from).animate({width: params[i].to}, {
        duration: 2000, 
        complete: function() {
            if(i + 1 < params.length) {
                animateProgressStep(id, params, i + 1);
            } 
        }
    });
}

I ended up starting animation sequence for each element, I feel it is the cleanest and easiest solution:

function animateProgress() {
    var params  = [{from: 50, to: 100}, {from: 0, to: 100}, {from: 0, to: 50}];
    $(".progress-overlay").each(function(){
        animateProgressStep($(this), params, 0);
    });
}

function animateProgressStep(el, params, i) {
    el.width(params[i].from).animate({width: params[i].to}, {
        duration: 2000, 
        complete: function() {
            if(i + 1 < params.length) {
                animateProgressStep(el, params, i + 1);
            } 
        }
    });
}