Menu
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.
[url]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.
[url]http://www.ttmt.org.uk/forum/10_slide/
[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>