jQuery: panel slider

Sliding panels and panel sliders: two important jQuery features that have become a must on every content-driven web site or when you have a series of elements that you want to animate in some way. In this post I'm going to show you how to create a smooth animation on a series of panels using jQuery. First of all, a word on markup: since we're going to use a series of elements, the best choice is to use an unordered list for this kind of task. For example:

<ul id="panels">

  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>

</ul>

Now we need a couple of CSS styles to align the panels, plus a CSS class called active to be used later with our animation:

#panels {
 width: 500px;
 height: 150px;
 margin: 0 auto;
 padding: 0;
 list-style: none;
 background: #333;
 color: #fff;
 border: 5px solid #999;
 border-width: 5px 0 5px 0;
}

#panels li {
 width: 100px;
 height: 100%;
 float: left;
 line-height: 150px;
 text-align: center;
 font-size: 80px;
 cursor: pointer;
}

#panels li.active {
 background: url(slide.png) no-repeat;
}

Now jQuery. We want the active panel to be larger and with a bigger font size, plus featuring a background image when a user hovers it with the mouse. Here's the code:

$('#panels li').each(function() {
  
  
    var pane = $(this);
    
    pane.mouseover(function() {
    
      pane.animate({
        width: '200px',
        fontSize: '120px'
      }, 200).addClass('active');
         
    });
    
    pane.mouseout(function() {
    
      pane.animate({
        width: '100px',
        fontSize: '80px'
      }, 200).removeClass('active');
    
    });
  
  });

We use the animate() method combined with the addClass() and removeClass() methods. The final effect is really smooth.

Demo

Live demo