jQueryを使って並べられた画像を順々に表示させる方法

ほとんどのフリーランスのWebデザイナーの人が自分のポートフォリオを作っていることでしょう。ここに一人、例外がおりますが（汗

※現在キューピッチで制作中です

ポートフォリオサイトを作る時に単純に画像が表示させるだけだと、ちょっと味気ないなぁって。
そこで簡単にjQueryを使って画像を順々にフェードインで表示させる方法を紹介します。

HTML

<ul id="portfolio">
  <li><img src="http://placehold.jp/150x150.png"></li>
  <li><img src="http://placehold.jp/150x150.png"></li>
  <li><img src="http://placehold.jp/150x150.png"></li>
  <li><img src="http://placehold.jp/150x150.png"></li>
  <li><img src="http://placehold.jp/150x150.png"></li>
</ul>

ダミー画像を用意する時はこのサイトが便利です。
Placehold.jp　http://placehold.jp/

CSS

#portfolio li{
  opacity: 0;
  float: left;
}

横に並べるのはfloatでもinline-blockでもflexboxでも何でもいいです。

jQuery

<script>
$(window).load(function(){
  var setThumb = $('#portfolio li');
  var delayTime = 400;

  setThumb.each(function(i){
    $(this).delay(i * delayTime).animate({opacity:'1'}, 1000);
  });
});
</script>

デモページ

delayTimeの部分で画像がどれくらい遅れて表示されるかを調整します。