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