Solved

jquery slide in slide out

Posted on 2010-08-13
4
789 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
Comment Utility
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
Comment Utility
Im completely new to this... any more help on how to get started??
0
 
LVL 16

Accepted Solution

by:
JF0 earned 500 total points
Comment Utility
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
Comment Utility
got the job done!
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now