記事に戻る（Back to Article）

【jQuery】リストを指定した順番からフェードインさせるテクニック/Specified order fadeInのデモページ（Demo page）

※デベロッパーツール等でソースコードをご確認ください（Please check using Developer tools）

このページの内容が難しいと感じた方はこちら

1
8
2
4
3
5
7
6

スポンサーリンク

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);
  });
});