jQuery: dynamic lists

Plain HTML lists are pretty simple to animate using jQuery. They are basically a set of elements grouped together within ol or ul elements. What we want is to add some effects on the list items, for example making them contracting and expanding when the mouse is over them or making them disappear when a user clicks on each item. First of all, we need a list:

<ul id="list">
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
</ul>

Then we can add some basic CSS styles to this list:

#list {
 width: 15em;
 font: 100% "Trebuchet MS", Trebuchet, sans-serif;
 margin: 0;
 padding: 1em;
 list-style: none;
}

#list li {
 height: 1.5em;
 margin-bottom: 0.4em;
 border-bottom: 1px dashed;
 overflow: hidden;
 cursor: pointer;
 line-height: 1.5;
}

Very simple, as you can see. The first thing we want to do is to add a dynamic numbering system to the above list. Each time the mouse is on an item, a number will apear with a progressive numbering. To accomplish this task, we need a span element to be added to each item. It will have the following CSS class:

span.number {
 background: #000;
 color: #f50;
 padding: 0 0.75em;
 font-weight: bold;
 margin-left: 0.5em;
 float: right;
 height: 1.5em;
 line-height: 1.5;
 text-align: center;
}

To work with our list items, we'll use a jQuery each() loop. Before doing this, we have to create our counter and the numbering system:

$(document).ready(function() {

  var number = '<span class="number"/>';
  var counter = 0;

  $('#list li').each(function() {
  
      var $li = $(this);
  
      $(number).html(counter += 1).appendTo($li).hide();
      
      // other code here
  });
});

Our counters have been inserted and then hidden inside each list item. Now we can add our effects using the hover() and click() handlers. To dynamically change the styles of each item, we also need another CSS class:

#list li.line {
 background: #a40;
 color: #fff;
 font-size: 1.2em;
 padding-left: 0.5em;
 border-left: 0.5em solid #f50;
 text-transform: uppercase;
 border-bottom: none;
}

Note that this class has an higher specificity than the other rules specified for our list items. If you do not do so, your styles will not override the basic styles of the list items. Now jQuery:

$li.hover(function() {
      
          $li.find('span.number').fadeIn(500, 
          
            function() {
            
            
                $li.addClass('line').animate({
                    width: '10em'
                }, 500, function() {
                
                    $li.find('span.number').animate({
                        width: '1em'
                    }, 500);
                
                
                });
            
            }
          
          
          );
      
      
      }, function() {
      
         $li.find('span.number').fadeOut(500, 
         
         
             function() {
             
                 $li.removeClass('line').animate({
                   width: '15em'
                 }, 500, function() {
                 
                   $li.find('span.number').animate({
                     width: 'auto'
                   }, 500);
                 
                 
                 });
             
             
             }
         
         
         
         );
      
      });
      
      
  $li.click(function() {
  
  
      $li.animate({
        opacity: '0'
      }, 1000, function() {
      
      
        $li.remove();
      
      
 });

Much of the actual work here is done by the animate() method, combined with the addClass() and removeClass() methods. You can see a demo below.

Demo

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.