0

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>
user123
  • 389
  • 2
  • 4
  • 14
  • Looks like this: http://jsfiddle.net/tVHYg/4/ But not on hover, and also i think that is html5 and doesnt work in IE7? – user123 Jan 02 '13 at 14:27

1 Answers1

0

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');
});​
bullfrog
  • 1,613
  • 1
  • 12
  • 13