Hi, You could use a recursive function to do this. Be sure to exit the function and not get stuck in a loop. Here is an example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> //<![CDATA[ function DoFadeIn(items,item_idx){ if(items[item_idx]==null) return; var item = items[item_idx]; $('#test').append('<h2 id="'+item+'"style="display:none">'+item +'</h2>') $('#'+item).fadeIn('fast',function(){ item_idx++; DoFadeIn(items,item_idx); }); } $(document).ready(function(){ var items = new Array('one','two','three'); var item_idx = 0; DoFadeIn(items,item_idx); }); //]]> </script> </head> <body> <div id="test"></div> </body> </html>
Ariel On Dec 11, 2:17 am, fserrano <fserr...@gmail.com> wrote: > 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" }); > > > > }