jQuery fadeIn list of elements one after another
Hello again,
Today im going to show you how you can fadeIn list of elements one after another.
The code is simple, informative and short and it’s wrote with jQuery.
Here it is:
$(document).ready(function(){
var numOfItemsToFade = 1,
numOfItems = $('ul li').length;
showList();
function showList() {
$('ul li:nth-child('+numOfItemsToFade+')').fadeIn(500, function(){
numOfItemsToFade++;
if(numOfItemsToFade<= numOfItems){
showList();
}
});
}
});
At first we declare the document.ready so that our JS will run after the DOM is fully loaded and we can start running JS without any problems, then we declare couple of variables in our code the first one will be the list item we start from and the second one is the length of our list, so that when we start our loop we will know when to stop it.
Please note that i have selected the “ul li” in my jQuery selection, but of course you could change it for what you need. It can be anything you want, DIV, LI, etc…
After we define our variables, We will call the showList() function, in that function i am selecting the first list item using the nth-child selector with the pre defined number 1. Then i call the fadeIn method on that element with the speed of 500 ms and in the call back function i update the number of the element that needs to be chosen next and see if it’s not bigger then our length of the whole list of items. if It’s not we will call the showList() function again and again with the appropriate number of element to fadeIn until our list ends.
Short and simple. 
