Animating list items with jQuery

Question

Hi Guys,

Im trying to find the best way of animating a list of items one by one.

So for example I have a UL with 7 items in it and when my trigger element is clicked I want each item to fade in one below the other with a slight delay between each item.

Any ideas would be most appreciated.

Thanks

Answer 1

You can use pseudo-recursion:

function fadeItem() {
    $('ul li:hidden:first').fadeIn(fadeItem);
}

This will fade in the first hidden item, and call itself when the animation finishes, fading the second item.
After it fades in the last item, the selector won't match anything, so it'll stop.

To add a delay between each fade, you can call jQuery's delay method, like this:

function fadeItem() {
    $('ul li:hidden:first').delay(500).fadeIn(fadeItem);
}

Demo

EDIT: Changed fade out to fade in

Answer 2

var slightdelay = 100; // in milliseconds

function fadeOneIn()
{
    $("ul li:not(:visible):first").fadeIn(function() { setTimeout(fadeOneIn, slightdelay); });
}

$("#trigger").click(fadeOneIn);

Answer 3

Assuming:

<ul class="fadein">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

and CSS:

ul.fadein li { display: none; }

run:

$(function() {
  fade_in_next();
});

function fade_in_next() {
  $("ul.fadein > li:hidden:first").fadeIn("slow", function() {
    setTimeout(fade_in_next, 500);
  });
}