Hi, I'm a jQuery newbie and need someone to point me in the right direction. I want to fade in a list of items but have each item fade in when the previous item is done fading, as opposed to having them all fade in at the same time. I want to do this in groups. So let's say the list has 100 items but I only want to show 5 at a time. After 10 seconds these 5 items fade out and the next 5 load, each fading in after the previous item is entirely visible.
I have done this in ActionScript, but with jQuery my main confusion is with dealing with loops after setTimeout events. In ActionScript I always got away with using the timeline to deal with time, but I don't have that luxury with JavaScript. Here's as far as I go before getting stuck: var itemsToShow = itemsToShow || 5 var current = current || 0; var itemArray = ["One","Two","Three"]; for( i=0+itemsToShow; i < itemsToShow; i++){ $("#itemList").append("<li>"+itemArray[i]+"</li>"); $("li").animate({"opacity": "toggle"}, { duration: "slow" }); }