[jQuery]コンテンツをふわっとフェードインさせる。

この記事は2年以上前に書かれたものです。 情報が古い可能性があります。

ページ読み込みが完了した後、指定した要素(サンプルではli要素)を時間差で順番にフェードインするスクリプトを作ってみました。

<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
 
$(function(){
  
    //フェードインさせる要素をいったん非表示にする
    $('li').css('display','none');

    });

$(function(){

    var $cont = $('li');

    //全てのページコンテンツを読み込んだ後に、function内の処理を実行
    $(window).load(function(){

        //ローディング画像をHTMLから削除する
        $('.loading').remove();

        //contの数だけループ
        for(var i = 0; i < $cont.length; i++){

        //contのi番目を、0.5×i秒後に、フェードインさせる
        $cont.eq(i).delay(500 * i).fadeIn();
        };

    });

});
</head>
<body>
<p class="loading"><img src="loadinfo.net.gif" alt="" /></p>

<ul>
	<li><img src="01.jpg" alt="" width="200" height="150" /></li>
	<li><img src="02.jpg" alt="" width="200" height="150" /></li>
	<li><img src="03.jpg" alt="" width="200" height="150" /></li>
	<li><img src="04.jpg" alt="" width="200" height="150" /></li>
</ul>
</body>

demo

ローディング画像をページのデータをロード後に削除し、その後li要素をfadeIn()でふわっとフェードインさせます。for文を使ってひとつずつタイミングをずらして次々にフェードインしていきます。

以下のサイト記事を参考にさせて頂きました。

jQueryでページ遷移時にフェードインフェードアウトの効果をつける (wald-grun/blog)
ソースコピーで簡単に使えるCSS3とjQueryで作るローディングページ作りました | HTML5でサイトをつくろう

コメントをどうぞ!

コメント

[…] jQueryでコンテンツがふわっとフェードインするエフェクトを作ってみました。 « StellaDesign […]

2013/06/0713:56 | jQueryを使ったフェードに関するメモ | ダイジブログ