Solved

jquery slide in slide out

Posted on 2010-08-13
4
795 Views
Last Modified: 2012-05-10
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>
0
Comment
Question by:maccaj51
  • 2
4 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33427437
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
 

Author Comment

by:maccaj51
ID: 33427467
Im completely new to this... any more help on how to get started??
0
 
LVL 16

Accepted Solution

by:
JF0 earned 500 total points
ID: 33431182
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
 

Author Closing Comment

by:maccaj51
ID: 33436821
got the job done!
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question