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" });
}
