Bouncy Panes

What you will be learning.

Today you will be learning how to do a bouncy frame! Now you may be asking what's a bouncy frame. Well a bouncy frame is a good way to minimize content so that you dont have long spans of text. Instead you will have it hidden and it will open and bounce when clicked on! Perfect for quotes as seen below or even hiding steps until you get to a certain one!

Example

NOTE: you will need a file called easing which you can get HERE

Ice Cube

"Went to the shelf and dusted off the AK, cops gotta get pealed."

Ice Cube

"Today I didn't even have to even use my A.K ! I got to say it was a good day"

Code Required

HTML Markup

          <div id="quotes">
<h3>Ice Cube
<div>
<p> "Went to the shelf and dusted off the AK, cops gotta get pealed."</p>
</div>
<h3>Ice Cube</h3>
<div>
<p> "Today I didn't even have to even use my A.K ! I got to say it was a good day"</p>
</div>
</div>

CSS Markup

	#quotes {
	margin: 0 0 10px 0;
}
#quotes h3 {
	margin: 0;
	padding: 0 5px 10px;
	background-color: #5FCEFF;
	border-bottom: 1px solid #F14548;
	font-weight: normal;
}
#quotes div {
	height: 120px;
	background-color: #F4B166;
	border-bottom: 1px solid #000000;
	position: relative;
}
#quotes p {
	position: absolute;
	left: 120px;
	top: 10px;
	margin: 0 10px 0 0;
	padding: 0;
}

Javascript Markup 

 $(document).ready(function(){
	 //hide all content wthin the panes when page loads
	 $('#quotes > div').hide(); // hides quotes dive
	 $('#quotes > div:first').show();
	 $('#quotes h3').click(function(){ // adds a click function to the quotes h3
		 $(this).next().animate({  // next it animates the click
			 'height':'toggle' // sets it to toggle the height
		 }, // ends toggle 
		 'slow','easeOutBounce');  // animates a slow bounce
	 });  // ends click
	  }); // end documment

Back