onload image go from 0 width to 100px width with easing

Question

I need to "slide in" a (background-)image in a div.

When I load the page, some div with a bg image or image inside it (and overflow?) needs to go from invisible/width=0 to 100px width. This needs to ease in.

Can anyone please help me out with the js?

<div style="overflow:hidden; width:100px; height:40px;">
    <img src="someimg.png" height="40" width="100" />
</div>

Answer 1

This uses jquery on document ready.. For easing can use the standard jquery 'linear' but I included the jquery.easing plugin where you can have different easing options.

http://jsfiddle.net/DyW7M/1/

$(document).ready(function () {
  $('#makeitlong').animate({ width: '400'}, 2000, 'linear');
});​