tutorial #2: bouncey content panels

Now, we are going to learn a more advanced way to incorporate easing, by adding a bouncy effect of easeOutbounce to an accordion.

(Please Note: For the Bouncey Content Panels to work, it will need jquery.easing.1.3.js. For more information about jQuery easing, visit: gsgd.co.uk/sandbox/jquery/easing)

For this demonstration, you will learn how to make Bouncey Content Panels. You will learn how to build the jQuery code needed and learn the purpose of each line, also, how to create the bouncey content panels in HTML and CSS.

Below is a demonstration of Bouncey Content Panels. Click on the heading of each panel to see the effect in action.

Major Comic Book Companies

Dark Horse Comics

Founded in 1988

Notable Characters/Series: 300, Aliens vs. Predator, and Sin City.

DC Comics

Founded in 1934

Notable Characters/Series: Batman, Green Arrow, Green Lantern, justice league, Sandman, Superman, and Wonder Woman.

IDW Publishing

Founded in 1999

Notable Characters/Series: 30 Days of Night, G.I Joe, and Stark Trek.

Image Comics

Founded in 1992

Notable Characters/Series: Invincible, Savage Dragon, Spawn, Wanted, and The Walking Dead.

Marvel Comics

Founded in 1939

Notable Characters/Series: Avengers, Captian America, Deadpool, Guardians of The Galaxy, Hulk, Iron Man, Punisher, Spider-Man, Thor, Wolverine, and X-Men.

Valiant Entertainment

Founded in 1988 (Relaunched in 2008)

Notable Characters/Series: Archer & Armstrong, Bloodshot, Harbinger, Quantum & Woody, Rai, Shadowman, and X-O Manowar.

The How-To

HTML

 
         			
<h2>Major Comic Book Companies</h2>

<div id="boucey-panels">



<h3>Dark Horse Comics</h3>

<div class="panel">

<img src="img/dark_horse_comics_logo.png" alt="Dark Comics Logo">
<p>Founded in 1988</p>

<p>Notable Characters/Series:  300, Aliens vs. Predator, and Sin City.</p>

</div>


<h3>DC Comics</h3>

<div class="panel">

<img src="img/New_DC_logo.png" alt="DC Comics Logo">

<p>Notable Characters/Series: Batman, Green Arrow, Green Lantern, justice league,
Sandman, Superman, and Wonder Woman.</p>

<p>Founded in 1934</p>

</div>

<h3>IDW Publishing</h3>

<div class="panel">

<img src="img/idw_logo.png" alt="IDW Logo">

<p>Founded in 1999</p>

<p>Notable Characters/Series: 30 Days of Night, G.I Joe, and  Stark Trek.</p>

</div>

<h3>Image Comics</h3>

<div class="panel">

<img src="img/image_i_logo_black.png" alt="Image Comics Logo">

<p>Founded in 1992</p>

<p>Notable Characters/Series: Invincible, Savage Dragon, Spawn,
Wanted, and The Walking Dead.</p>

</div>

<h3>Marvel Comics</h3>

<div class="panel">
                                
<img src="img/marvel_logo.png" alt="Marvel Logo">

<p>Founded in 1939</p>

<p>Notable Characters/Series: Avengers, Captian America, Deadpool,
Guardians of The Galaxy, Hulk, Iron Man, Punisher, Spider-Man, Thor,
Wolverine, and X-Men.</p>

</div>

<h3>Valiant Entertainment</h3>

<div class="panel">

<img src="img/Valiant_logo.png" alt="Valiant Entertaiment Logo">

<p>Founded in 1988 (Relauched in 2008)</p>

<p>Notable Characters/Series: Archer & Armstrong, Bloodshot, Harbinger,
Quantum & Woody, Rai, Shadowman, and X-O Manowar.</p>


</div>

CSS

   
.panel {
  background-color: #F4F4EE;
  width:1024px;
  height:240px;
  position: relative;
  border-bottom:1px solid #0E3360;

}

h3   {
 	background: none repeat scroll 0 0 #2b83a8;
    border-bottom: 1px solid #fff;
    color: #ebebeb;
    margin: 1px;
    padding: 10px 225px 5px 3px;
}

.panel p {
  color: #000000;
    left: 450px;
    margin: 5px 10px 5px 2px;
    padding: 0;
    position: absolute;
    top: 70px;
}

jQuery

$(document).ready(function(){//Readies the document. 
  $('#boucey-panels > .panel').hide();
 //Hides all the content panes when the page loads
  $('#boucey-panels h3').click(function() {
 //Makes the content panels open when the users clicks on the h3 tag.  
    $(this).next().animate({
   //looking for next element.
      'height':'toggle'
 //Makes the content panel increase in height through a 'toggle' event. 
    }, 'slow', 'easeOutBounce');
 //Denotes the speed to which the panels open, and the easing effect.
  });
});//Close