jQueryを使用するとサイトに様々な動きを出すことができます。
今回は、jQueryでli要素を遅延させながら順番にフェードインさせて表示する方法を記載します。
jQueryでli要素を順番にフェードイン
画像を順番に表示する方法を記載します。
ファイル読込
jQueryを読み込みます。
|
1 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
HTML
順番にフェードさせて表示するリストを設定します。
|
1 2 3 4 5 6 7 8 9 |
<div id="fadein_area"> <ul> <li><img src="./sample1.jpg" /></li> <li><img src="./sample2.jpg" /></li> <li><img src="./sample3.jpg" /></li> <li><img src="./sample4.jpg" /></li> <li><img src="./sample5.jpg" /></li> </ul> </div> |
JS
下記のコードを記述します。
最初にリストを非表示にし、要素を繰り返しフェードインさせております。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript"> $(function(){ // リストを非表示 $('#fadein_area ul li').hide(); // 繰り返し処理 $('#fadein_area ul li').each(function(i) { // 遅延させてフェードイン $(this).delay(500 * i).fadeIn(1000); }); }); </script> |
遅延するスピードを調整する場合はdelayの数値を変更します。
また、フェードするスピードを調整する場合はfadeInの数値を変更します。
後は、CSSでスタイル等を調整すれば完了です。
サンプル
まとめ
今回はdelayメソッドとfadeInメソッドを使用して、指定した要素を遅延させてフェードインする処理を記載しました。
jQueryを使用すると様々な効果を出すことが可能です。
一覧ページやギャラリーページなどで使用すると良いかもしれませんね。
ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください！
お気軽にご相談ください。
022-716-3883
営業時間 平日9:30～18:00
関連記事
Category
最近の投稿
人気の投稿
