Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animating list items with jQuery

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

like image 402
Giles Butler Avatar asked May 12 '10 14:05

Giles Butler


1 Answers

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

like image 128
SLaks Avatar answered Oct 03 '22 12:10

SLaks