jquery time line

Question

hi,

 

 i triying to do timeline like that green color line bar inside that Image .i have one doubt in this slightly i want to do some changes here.in that time line its directly come to that particular width when i click submit. i need from starting level to width level.when i click the submit it will slowely gofor that time period i want to do this can you please tell me any refrence site if you know means tell me please  

 

 

This is my script ;

 ---------------------- 

var value = null;

var left = null;

var getAllvalue;

var commonvalue = {};

(function ($) {

$.fn.slideToPos = function () {

if (getAllvalue == "Seller") {

$(".menu a.knob").css("left", 80, $("#Para").text("Preparing"));

$(".before").css("width", 100);

}

else if (getAllvalue == "Shipper")

{

$(".menu a.knob").css("left", 210, $("#Para").text("Dispatched"));

$(".before").css("width", 230);

}

else if (getAllvalue == "CourierOfficer")

{

$(".menu a.knob").css("left", 440, $("#Para").text("On d way"));

$(".before").css("width", 460);

}

else if (getAllvalue == "DeliveryPerson") {

$(".menu a.knob").css("left", 640, $("#Para").text("OutForDelivery"));

$(".before").css("width", 660);

}

else {

$(".menu a.knob").css("left", 20);

$(".before").css("width", 40);

}

return this;

};

})(jQuery);

var MyLibrary = MyLibrary || (function () {

return {

init: function (responce) {

commonvalue = responce;

},

changeLine: function (Addlinevalue) {

getAllvalue = Addlinevalue;

$(".menu").slideToPos();

var nav1 = $(".before");

if (nav1.length) {

$('html, body').animate({ scrollTop: nav1.offset().top }, 400);

}

}

};

}(jQuery));