同じような要素を並べて表示する箇所などで少しばかりリッチ感を出したいな～ってときに、各要素を遅延表示させたりすることで単純な一覧表示よりも動きがあっていいかもしれません。
jQueryを使ってリストを簡単に時間差で表示させてみたいと思います。
1.リストを遅延表示させる
HTMLを記述
|
1 2 3 4 5 6 7 |
<ul class="list-simple list"> <li><a href="#">list01</a></li> <li><a href="#">list02</a></li> <li><a href="#">list03</a></li> <li><a href="#">list04</a></li> <li><a href="#">list05</a></li> </ul> |
CSSを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*リスト共通CSS*/ .list li{ margin:5px; background:#333; position: relative; } .list li a{ display: block; text-decoration: none; color: #CCC; padding:10px; } .list li a:hover{ background: #aaa; color:#000; } |
JavaScriptを記述
jQuery本体を読み込んだ後に下記を記述します。
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(function(){ $('ul.list-simple li') .css({opacity: 0}) .each(function(i){ $(this).delay(300*i).animate({opacity:1}, 1500); }); }); </script> |
2.リストを遅延表示させる / 右から左へスライド表示
HTMLを記述
|
1 2 3 4 5 6 7 |
<ul class="list-slide list"> <li><a href="#">list01</a></li> <li><a href="#">list02</a></li> <li><a href="#">list03</a></li> <li><a href="#">list04</a></li> <li><a href="#">list05</a></li> </ul> |
JavaScriptを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//右から左へスライド表示 $(function(){ $('ul.list-slide li') .css({ opacity: 0, left: '50px' }) .each(function(i){ $(this).delay(300*i) .animate({ opacity:1, left: '0' }, 1000); }); }); </script> |
3.リストを遅延表示させる / 下から上へスライド表示
HTMLを記述
|
1 2 3 4 5 6 7 |
<ul class="list-up"> <li><a href="#">list01</a></li> <li><a href="#">list02</a></li> <li><a href="#">list03</a></li> <li><a href="#">list04</a></li> <li><a href="#">list05</a></li> </ul> |
JavaScriptを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//下から上へスライド表示 $(function(){ $('ul.list-up li') .css({ opacity: 0, bottom: '-20px' }) .each(function(i){ $(this).delay(300*i) .animate({ opacity:1, bottom: '0' }, 1000); }); }); </script> |
4.リストを遅延表示させる / 上から下へスライド表示
HTMLを記述
|
1 2 3 4 5 6 7 |
<ul class="list-down"> <li><a href="#">list01</a></li> <li><a href="#">list02</a></li> <li><a href="#">list03</a></li> <li><a href="#">list04</a></li> <li><a href="#">list05</a></li> </ul> |
JavaScriptを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//上から下へスライド表示 $(function(){ $('ul.list-down li') .css({ opacity: 0, top: '-20px' }) .each(function(i){ $(this).delay(300*i) .animate({ opacity:1, top: '0' }, 1000); }); }); </script> |
解説
JavaScritの中身を解説すると、はじめに対象となる要素を指定し、リストを「.css」で「opacity:0」透明表示にしておきます。そして、.each（function()）で繰り返し実行したい処理（＝今回は各リストを遅延させながら順番に表示したい）を記述します。「.delay(300*i)」で各リストを300ミリ秒ずつ表示開始時間をズラしています。「.animate({opacity:1}.1500)」は、後ろの数値（＝1500）でアニメーションにかける時間を指定し、今回は「opacity:1」（透明だったリストを不透明にしています。）それをリスト要素の数だけ繰り返したいので、先程の「.each(function(i))」の引数に「i」を代入しそれぞれを300ミリ秒づつ時間差で表示するように指定をしています。