Create a website intro with jQuery

A couple of days ago I was asked if I could create a little intro for a website.
The person, who asked the question, showed me some examples… in Flash…

I’ve never been a fan of Flash websites so I was thinking if it would be possible to create an intro in jQuery?
Well let’s get started! Example of the jQuery intro…

HTML

The HTML-code is quite straightforward:

<div id="intro">
 <ul>
 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 <li>Phasellus id enim ut turpis dictum tincidunt.</li>
 </ul>

 <ul>
 <li>In tincidunt metus ut arcu ultricies a tempus est pretium.</li>
 <li>Nam tristique ultricies nunc, at ultrices nulla fringilla quis.</li>
 </ul>

 <ul>
 <li>Sed sit amet ante ut enim aliquam pulvinar a sed eros.</li>
 </ul>
 </div>

CSS

Nothing special here; the only important thing is the position: absolute so the text will always come from the same spot.

#intro { margin-top: 25px; }
 #intro ul { position: absolute; }
 #intro li {
 font-size: 28px;
 margin-bottom: 15px;
 }

Javascript

if(jQuery) {
    var listItems = new Array();
    var next_index = 0;

    $(document).ready(function() {
        // hide each list in the div intro
        $("#intro ul").each(function() {
            // add each list to a global array
            listItems.push($(this));
            // position each list outside the screen
            $(this).children().css("margin-left", -700);
        });

        // start the intro
        animateList(listItems);
 });

function animateElement(elements, index) {
      if(!index) index = 0;

      var next_childIndex = index + 1;
       if(next_childIndex > elements.length) {
           // all listitems of the list has been animated; hide the complete list
           $(elements[0]).parent().animate({
                opacity: 0
            }, 1000, function() {
                // start animating the next list
                animateList(listItems, next_index);
            });

           return;
       }

       var element = elements[index];
       // start animating the current listitem
       $(element).animate({
           marginLeft: 10
       }, 3000, function() {
           // start animating the next listitem
           animateElement(elements, next_childIndex);
       });
 }

function animateList(elements, index) {
      if(!index) index = 0;

      next_index = index + 1;
      if(next_index > elements.length) { return; }

      var element = elements[index];

      var itemChildren = new Array();
      $(element).children().each(function() {
          // get each listitem from the current list and add them to an array
          itemChildren.push($(this));
      });

      // start the animation of the listitems of the current list
      animateElement(itemChildren);
 }
 }

Credits for most of the code: wait for each jQuery on StackOverflow