Question

I’m implementing a progress bar (for timing a background task, I already know the exact time it will take) – but I’m having trouble with the oncomplete event firing early.

$("#go").on("click", function(event){

    event.preventDefault();

    $('#report-loader .bar').animate({ 
        width: 500 
    },
    {   
        easing: 'linear',
        duration: 500,
        complete: function() {
            alert('complete');        
        }          
    });
});

​
​

Here’s a JSFiddle that shows an example of what I mean:
http://jsfiddle.net/ezE8b/1/

Answer 1

Replace :
$('#report-loader .bar').animate({
width: 500
},


by

$('#report-loader .bar').animate({
width: "100%"
},


Works fine for me.