jQuery Forum

I was able to do this by putting the image inside a div. The div is positioned relative and the image is absolute. The div has the same height as the image and overfill set to hidden. Then I used animation to move the image down (or up).

Example

Is this what you're talking about?

<style type="text/css">
#image {
height: 500px;
width: 375px;
position: relative;
overflow: hidden;
}
img {
position: absolute;
}
</style>

<script type="text/javascript"> 
$(document).ready(function(){
$("#slide_down_reverse").click(function(){
   $("#img_slide").animate({'top':'+=500px'},350);
});
});
</script>

<div id="image">
<img src="http://farm1.static.flickr.com/45/166787202_606013b9ab.jpg" width="375" height="500" id="img_slide" />
</div>

<p>
<button id="slide_down_reverse">Slide Down (reverse)</button>
</p>

Thank you. If you don't use jQuery everyday, you forget about such simple things as animate()