how do you fadeIn dynamic number of list items one at a time
I'm loading another html file full of list items. What I would like to do is hide() the content right after it's loaded, and then fadeIn(0 each individual list item one at a time.
The problem is, it's loading all the list items at once. I don't know what to do. I could code the chain manually, but only if I knew the number of items in the list would never change. I'd really rather set it up to fadeIn any number of items dynamically.
Here's my code, which I know doesn't work, but maybe you could see what I am trying to do:
-
function loadContent(location) {
$('#content').load("assets/content/"+ location).hide();
var x = $('li#content').size();
var y = x - 1;
for ( i = 0 ; i <= y ; i++ )
{
$('li#content:eq('+i+')').fadeIn(500, function() {
setTimeout(loadContent, 250);
});
}
}