Move image inside a div?

I have a div wi开发者_如何学JAVAth a specific width and height. And a smaller image with the same width but much less height. How could I

• Position the small image to the inside top of the big div (but still all the small image to be visible in it)
• Animate the small image from the inside top of the big div to the inside bottom (and again, still keep it all visible)
• Inverse the process to go to the top again

I 've been totally confused with this one. All widths/heights are known, so they don't need to be calculated dynamically.

Thank you.

You can see an example of the code here

In general look at the .animate() method of jQuery.

1. Set position:relative on the containing div.
2. Set position:absolute on the image.
3. Use setInterval to increment the top CSS property of the image until it equals (containing div's height) - (image's height)
4. Once that is reached, do the same except decrement the top property until 0
5. goto 3 :)