How to animate the width of a div slowly with jquery

$('input').hover( function(){ 
    $(this).fadeTo('slow', 0.75);
},
function(){ 
    $(this).fadeTo('slow', 1.0);
});

<img src="one.png" id="one" />

$('#one').hover(function() {

    // increase the 500 to larger values to lengthen the duration of the fadeout 
       // and/or fadein
    $('#one').fadeOut(500, function() {
        $('#one').attr("src","/newImage.png");
        $('#one').fadeIn(500);
    });

});

$("#link").hover(function(){
  $(this).animate({ color: '#fed900'}, "slow");
}, function() {
  $(this).animate({ color: '#000000'}, "slow"); 
});

.navLI{
  -webkit-transition: 0.3s;
          transition: 0.3s;
  background: rgba(255, 51, 255, 0.5);
}
.navLI:hover{
  background: rgba(255, 255, 51, 1);
}

 $(this).stop().animate({"backgroundColor": jQuery.Color(255, 51, 0, 1)}, 500);

function update_progress_bar() {
    var progress = (window.total / window.target),
        new_width = $("#progress-bar").parent().width() * progress;

    $("#progress-bar").animate({
        width: new_width,
    }).text(window.total);
}

<style>
.progress-bar {
    transition: width 1s;
}
<style>

function update_progress_bar() {
    progress_percent_full = (window.total / window.target) * 100;
    var new_width = progress_percent_full + "%";

    $("#progress-bar").width(new_width).text(total);
}