コンテンツや画像などを順番にフェードインするjQuery

fadein

写真のギャラリーページや、いくつかの記事を一覧で表示するページなどで、各コンテンツ要素をページロード時にひとつずつフェードインして表示する方法をjQueryで実装します。

デモサンプル

1.HTMLを記述する

フェードインする要素として今回は<li>の中に画像を単純なリストで25個並べています。

 

 

2.CSSを記述する

順番にフェードインさせる<li>はCSS側で「display:none」を指定して一旦非表示にしておきます。

 

 

3.JavaScriptを記述

jQueryのエフェクト「.delay()」を使って画像(コンテンツ要素)の読み込み時間を遅延させます。
「.delay()」後は「.fadeIn()」などを使ってフェードインさせる方法が可能ですが、「.animate()」を使うようにしておくと、フェード処理以外にも演出を簡単に追加することができるので今回は便利なこちらを使用します。

 

以上になります。




タイトルとURLをコピーしました