How do I load elements sequentially using jQuery?

Brief:

I want to load a list of elements sequentially using the library jQuery. This method is effective for a gallery of images or a series of buttons.

Tip: This could be used on the $( window ).load event so when the page has loaded the javascript would then fire.

Write the following HTML and save it as a new page
```
  
  
  
  
  
```
Secondly add the following CSS. This is only for the demo so you can change this once you have it working. Test your HTML in your browser and make sure it looks as expected.
```
li.everything { 
	width:40px;
	height:40px;
	background:#bbb;
	display:inline-block
}
```
Now that you have the HTML and CSS working together it's time for the jQuery. Make sure you already have the jQuery library added copy the following code to your javascript file. If you don't have one create it and save within a 'js' folder. Don't forget to reference it in your HTML.
```
var eT=0;
$('.box').hide().each(function() {
  $(this).delay(eT).fadeIn('slow');
  eT += 400; // Fade in speed
});
```
Demo
See the Pen Load list items sequentially by Dean Hodges (@pebbledesigns) on CodePen.
And thats it! So what does it do? It basically loops through the HTML and looks for all classes of '.box'. I could target the each LI but this example was used for a series of images or buttons.