jquery slide in slide out

attached is my html code example... how would i get the comments div to slide in from bottom of holder div on mouseover and slide out to bottom of holder on mouse off?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#holder {
      height: 300px;
      width: 300px;
      background-color: #0CF;
      position: relative;
}
#holder #comments {
      background-color: #000;
      position: absolute;
      height: 100px;
      width: 300px;
      bottom: 0px;
}
-->
</style>
</head>

<body>
<div id="holder">
  <div id="comments">Content for  id "comments" Goes Here</div>
</div>
</body>
</html>
maccaj51Asked:
Who is Participating?
 
JF0Connect With a Mentor Commented:
Take a look at this example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<style type="text/css">
<!--
#holder {
      height: 300px;
      width: 300px;
      background-color: #0CF;
      position: relative;
}
#holder #comments {
      background-color: #000;
      color:white;
      position: absolute;
      height: 0px;
      width: 300px;
      bottom: 0px;
}
-->
</style>

<script type="text/javascript">
	jQuery(document).ready(function () {
		$("#holder").hover(
			function () {
				$('#comments').animate({"height": "+=100px"}, 500);
			},
			function () {
				$('#comments').animate({"height": "-=100px"}, 500);
			}
		);
	});
</script>

</head>

<body>
<div id="holder">
  <div id="comments">Content for  id "comments" Goes Here</div>
</div>
</body>
</html>

Open in new window

0
 
Gurvinder Pal SinghCommented:
check this example with demo link
http://spoonfedproject.com/jquery/jquery-image-slide-on-hover-effect/

check these sliding effects functions by jquery
http://api.jquery.com/category/effects/sliding/

0
 
maccaj51Author Commented:
Im completely new to this... any more help on how to get started??
0
 
maccaj51Author Commented:
got the job done!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.