Move image inside a div?

Question

I have a div with 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.

Answer 1

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 :)

Answer 2

You can see an example of the code here

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