ページ読み込みが完了した後、指定した要素(サンプルでは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>
ローディング画像をページのデータをロード後に削除し、その後li要素をfadeIn()でふわっとフェードインさせます。for文を使ってひとつずつタイミングをずらして次々にフェードインしていきます。
以下のサイト記事を参考にさせて頂きました。
jQueryでページ遷移時にフェードインフェードアウトの効果をつける (wald-grun/blog)
ソースコピーで簡単に使えるCSS3とjQueryで作るローディングページ作りました | HTML5でサイトをつくろう
One thought on “[jQuery]コンテンツをふわっとフェードインさせる。”