Question

I know that my code is far from getting where I want to go. What I want to achieve is a list on items, where they cycle through with a slide down animation one after another. I am not sure how to approach this.

html

<div class="message">

                        <ul>
                            <h2><li class="rotate1">A better web...</li></h2>
                            <h2><li class="rotate2">Built By Spring Method</li></h2>
                            <h2><li class="rotate3">Test content</li></h2>

                        </ul>


                </div>

js

$(function() { 
$(".rotate2").hide();
$(".rotate3").hide();

    $(".message ul li").each(function(){
       $(this).slideDown(); 
    });
});

Answer 1

This example should clear some things up for you:

http://jsfiddle.net/mattdlockyer/GhPqu/

The key is to specify a function for your animation and then call it recursively as the function when the first slideDown method completes.

For more information on how slideDown works check here: http://api.jquery.com/slideDown/

You’ll see that you can specify a function for completion as shown in this example:

$('#clickme').click(function() {
  $('#book').slideDown('slow', function() {
    // Animation complete.
  });
});

I’ve used this mechanism to recursively call the animate function and iterate to the next element in the list.

Since the 4th element doesn’t exist the function won’t get called, and you won’t waste any cycles…

Simple and elegant imho!