さぁ!検索しよう!

jQueryでページを読み込んだ際に、コンテンツをタイミングをずらして表示させる方法を解説します。

この方法はブログのトップページに用いると良いでしょう。

始めに完成デモをご覧ください。

完成デモ

ページを読み込むとフェードインしながら4つのコンテンツが順番に表示されます。

次に各ソースコードをご覧ください。

始めにHTMLです。

HTML

<div class="contents clearfix">
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
</div>

今回は<div class="post"></div>をjQueryで操作します。

続いてCSSです。

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.contents {
  margin: 0 auto;
  width: 400px;
}

.post {
  background: #8DCF3F;
  float: left;
  height: 200px;
  opacity: 0;
  width: 50%;
}

.post:nth-child(3n+1) {
  background: #F58E7E;
}

ページの読み込み時にコンテンツを表示させるため、.postopacity:0;を指定し、透明にしておきます。

最後にjQueryです。

jQuery

$(function() {
  $(window).load(function() {
    var fadeSpeed = 1000;
    $('.post').each(function(i) {
      $(this).delay(i * 500).animate({
        'opacity': 1
      }, fadeSpeed);
    });
  });
});
  • jQueryではウィンドウが読み込まれたときの処理のみを行なっています。
  • 	$(window).load(function() {
    	
  • ウィンドウが読み込まれると、$(this).delay(i * 500).animate({によって、それぞれの.postが500ミリ秒毎に順番に表示されます。
  • 	$('.post').each(function(i) {
    	      $(this).delay(i * 500).animate({
    	        'opacity': 1
    	      }, fadeSpeed);
    	});
    	

以上で、ページ読み込み時にコンテンツを遅らせて表示させる方法の解説を終わります。