【jQuery】Technique for fading in a list from a specified order/Specified order fadeIn | Demo page

※Please check using Developer tools

Commentary

Sponsored links

CSS

.list {
  overflow: hidden;
  width: 800px;
  margin: 0 auto;
}

.list li {
  float: left;
  width: 200px;
  height: 200px;
  padding: 100px 0 0;
  line-height: 0;
  text-align: center;
  color: #fff;
  background: #000;
  opacity: 0;
}
  

JavaScript

$(function() {
  var fade = ['.list-01','.list-02','.list-03','.list-04','.list-05','.list-06','.list-07','.list-08'];
  $.each(fade, function(i, val) {
    $(val).delay(180 * i).animate({opacity:'1'},400);
  });
});