jquery ui slider image width

jquery ui slider image width

I'm trying to make an image appear as the slider moves. So for example I have 2 images and the one images has overflow:hidden and width:0%. So when I move the slider the 1st image must increase its width over the 2nd image.

Here is my HTML

  1. <body> <div class="puppy"><img src="images/dog.jpg" /></div> <div class="kitten"><img src="images/cat.jpg" /></div> <div id="slider"></div> </body>

Here is my JS

  1. $(function() { $( "#slider" ).slider(); });

And here is my css

  1. .puppy { overflow: hidden; position: absolute; width: 0; }

And here is the JSFIDDLE:JSFIDDLE

If there is anything that isn't clear please let me know