Slow down an jquery animation

Question

I have an animation that i have been trying to slow down but so far i have been unsucsessful i have tried duration and adding the time at the end however the animation seems to run at the same speed.

any help would be great.

$("document").ready(function(){
    // Change the width of the div
    var i = 0;
    $(".progress-bar span").animate({
        width: "100%"
        },
        {step: function(){
        //console.log( "width: ", i++ );
        console.log($(this).width());
        },
         complete : function(){
             console.log("finished");
         }
        },2000);
});

see fiddle here http://jsfiddle.net/Jrand/8jXDK/2/

Answer 1

You just need to set the duration argument for the animation as part of the second argument which is the options object. jQuery's .animate() takes several forms. The form you are using takes two objects and the second object can include the duration as a property of that second argument like I show here:

$("document").ready(function(){
    // Change the width of the div
    var i = 0;
    $(".progress-bar span").animate({
        width: "100%"
        },
        {
            duration: 5000,
            step: function() {
                //console.log( "width: ", i++ );
                console.log($(this).width());
            },
            complete: function() {
                 console.log("finished");
            }
     });
});

Answer 2

Try this,

$("document").ready(function(){
// Change the width of the div
var i = 0;
$(".progress-bar span").animate({
    width: "100%"

    },
    {
        duration: 5000,
        step: function(){
                //console.log( "width: ", i++ );
                console.log($(this).width());
            },
         complete : function(){
             console.log("finished");
         }
    });
 });

Your updated jsfiddle code >> http://jsfiddle.net/8jXDK/4/