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">



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() {
        width: '200px',
        fontSize: '120px'
      }, 200).addClass('active');
    pane.mouseout(function() {
        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.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.