Animate through a set of list items with jQuery

Here’s an interesting code snippet I’ve found handy in past projects. Great for highlighting specific information within an application or web page. To start with lets have a brief explanation as to what we’re going to be doing. We have a set of items in a list, and we want to iterate though the list increasing and decreasing the font size. Here’s how it’s done.

The Code

Firstly we setup three variables that are used in the function, notice that we’re chaining the variables instead of declaring ‘var’ each time which is the optimal way of declaring multiple vars in jQuery. You can adjust the delay and animate values to suit your needs. We then loop through each list item using the eq(); method which allows us to select which list item to animate, you can see we’re passing the variable ‘i’ to this method which is increased towards the bottom of the script. Within the loop we finally call the function again to start the process again.

$(document).ready(function() {

         var i = 0,
         delay = 2000,
         animate = 400;
         function animateList(){
                 var imax = $("ul#list li").length -1;
                 $("ul#list li:eq(" + i + ")")
                         .animate({"fontSize" : "80px"}, animate)
                         .animate({"fontSize" : "80px"}, delay)
                         .animate({"fontSize" : "30px"}, animate, function(){

                                 (i == imax) ? i=0 : i++;
                                 animateList();
                         });

                 };

	   animateList();
});

The HTML

<ul id="list">
<li>Advertising</li>
<li>Art</li>
<li>Automotive</li>
<li>Business</li>
<li>Celebrity</li>
</ul>