写真のギャラリーページや、いくつかの記事を一覧で表示するページなどで、各コンテンツ要素をページロード時にひとつずつフェードインして表示する方法をjQueryで実装します。
1.HTMLを記述する
フェードインする要素として今回は<li>の中に画像を単純なリストで25個並べています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<ul> <li><a href="#"><img src="images/img1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img5.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img6.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img7.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img8.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img9.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img10.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img11.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img12.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img13.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img14.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img15.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img16.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img17.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img18.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img19.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img20.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img21.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img22.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img23.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img24.jpg" alt="" /></a></li> <li><a href="#"><img src="images/img25.jpg" alt="" /></a></li> </ul> |
2.CSSを記述する
順番にフェードインさせる<li>はCSS側で「display:none」を指定して一旦非表示にしておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
ul { margin: 0 auto; width: 800px; text-align: left; } ul li { margin:5px; width:150px; text-align:left; float:left; display: none; overflow:hidden; } /* ================================== clearfixElements ================================== */ ul:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; } ul { display: inline-block; overflow: hidden; } |
3.JavaScriptを記述
jQueryのエフェクト「.delay()」を使って画像(コンテンツ要素)の読み込み時間を遅延させます。
「.delay()」後は「.fadeIn()」などを使ってフェードインさせる方法が可能ですが、「.animate()」を使うようにしておくと、フェード処理以外にも演出を簡単に追加することができるので今回は便利なこちらを使用します。
1 2 3 4 5 6 7 8 9 |
$(function(){ $(window).load(function(){ var delaySpeed=100; /*読み込みの遅延速度*/ var fadeSpeed=1000; /*表示時のアニメーション(フェード)時間*/ $('ul li').each(function(i){ $(this).delay(i*(delaySpeed)).css({display:'block',opacity:'0'}).animate({opacity:'1'},fadeSpeed); }); }); }); |
以上になります。