How to animate the width of a div slowly with jquery

Question

I have navigation nested in a div that is offscreen to the left and when the user scrolls down the page and reaches pixel 296, the left navigation slowly appears by it's width growing towards the right.

What I have now is half working. The navigation nested in the div appears when the user scrolls down the page but I want it to animate slowly to the right and that is not happening. Not sure what I am doing wrong. The specific line I am having problems with is:

$("#slidebottom").animate({ width: "100" }, 'slow');

But here is my entire code:

$(window).scroll(function(){

  var wintop = $(window).scrollTop(), docheight = $(document).height(), 
  winheight =    $(window).height();

  var bottomHeight = $("#slidebottom").height();
  var zeroheight = 0;

  if  (wintop > 296) {
    bottomHeight = $('#slidebottom').height(docheight);
    $("#slidebottom").animate({ width: "100" }, 'slow');

  }

  if( wintop < 296)
  {
    bottomHeight = $('#slidebottom').height(zeroheight);    
    //$("#slidebottom").animate({ width: "0" }, 'slow');
  }
});

Answer 1

The jQuery docs show ints, not strings, as the arguments to width:

$("#slidebottom").animate({ width: 100 }, 'slow');

Edit: So I was wrong, that's not the problem; it handles strings just as well.

Answer 2

Try the following maybe?

$("#slidebottom").animate({ width: '100px' }, 'slow');

I have a feeling that the unit is important for this, since 100 can mean anything. Not very specific. And you can define this as a string just fine. In fact, in the example they give for .animate it is defined as a string.