Sliding Content

Hi all

I thought this would be easy but I'm stuck and I can't describe what's really simple so I've drawn a diagram to help.

http://www.ttmt.org.uk/forum/10_slide/one.gif

I have a div containing an image like 1 in the diagram

I only want to show the top of the image like 2 in the diagram

When I hover over the div I want the image to scroll up to show the bottom of the image like 3 in the diagram

It seems really simple but I'm completely stuck, any help would be really appreciated.


untitled


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css" media="screen">
	 *{
	   margin:0;
	   padding:0;
	 }
	 #wrap{
	   margin:50px;
	   width:700px;
	 }
	 ul{
	   list-style:none;
	 }
	 
	 
	</style>
</head>

<body>
  <div id="wrap">
    <ul>
      <li><a href="#" id="one"><img src="img.gif" width="250" height="200"/></a></li>
      
    </ul>
  </div>
  
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
  <script>
    
    $('li').hover(function(){
      $(this).find('img').animate({top: + (-200) + 'px'},200);
    })
    return false;
    
  </script>
  
</body>
</html>