Blog

HOME > Web > JQuery > 【jQuery】liを順番に表示する方法

【jQuery】liを順番に表示する方法

2025/01/31

JQuery

備忘録です

liを順番に表示する方法です

JavaScriptでLIを順番にフェードアップする

HTML:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LI 順番フェードアップ</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            opacity: 0; /* 最初は非表示 */
            transform: translateY(20px); /* 少し下にずらしておく */
            transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* アニメーションの設定 */
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 5px;
        }
        li.fade-in {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <ul id="myList">
        <li>アイテム 1</li>
        <li>アイテム 2</li>
        <li>アイテム 3</li>
        <li>アイテム 4</li>
        <li>アイテム 5</li>
    </ul>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const listItems = document.querySelectorAll('#myList li');
            let delay = 0; // 各アイテムの遅延時間

            listItems.forEach((item, index) => {
                setTimeout(() => {
                    item.classList.add('fade-in');
                }, delay);
                delay += 200; // 次のアイテムは200ms遅れて表示
            });
        });
    </script>
</body>
</html>

解説:

HTML:

    の中に複数の

  • を配置します。
    CSSで初期状態（opacity: 0;とtransform: translateY(20px);）とアニメーション後の状態（.fade-inクラス）を定義します。transitionプロパティでアニメーションの時間を設定します。

    JavaScript:
    DOMContentLoadedイベントリスナーを使って、DOMが完全に読み込まれた後にスクリプトを実行します。
    document.querySelectorAll('#myList li')で、すべての

  • 要素を取得します。
    forEachループを使って、各

  • 要素に対して処理を行います。
    setTimeoutを使って、各

  • 要素に遅延をかけて.fade-inクラスを追加します。
    delay変数を200msずつ増やしていくことで、各

  • が順番にフェードインするようにします。

    jQueryでLIを順番にフェードアップする

    HTML:

    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LI 順番フェードアップ (jQuery)</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            opacity: 0; /* 最初は非表示 */
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 5px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <ul id="myList">
        <li>アイテム 1</li>
        <li>アイテム 2</li>
        <li>アイテム 3</li>
        <li>アイテム 4</li>
        <li>アイテム 5</li>
    </ul>

    <script>
        $(document).ready(function() {
            $('#myList li').each(function(index) {
                $(this).delay(200 * index).animate({
                    opacity: 1,
                    // transform: 'translateY(0)' はjQueryの.animate()では直接サポートされていません。
                    // CSSでtransitionを設定するか、jQuery UIなどを使う必要があります。
                    // ここではopacityのみをアニメーションさせます。
                    // もしtransformもアニメーションさせたい場合は、CSSのアニメーション（上記参照）を推奨します。
                }, 500); // 500msかけてフェードイン
            });
        });
    </script>
</body>
</html>

    解説:

    HTML:
    jQueryライブラリをCDNから読み込みます。
    JavaScript:
    $(document).ready()は、DOMが完全に読み込まれた後にコードを実行するためのjQueryのメソッドです。
    $('#myList li').each(function(index) { ... });を使って、各

  • 要素をループ処理します。indexは現在の要素のインデックス（0から始まる）です。
    $(this).delay(200 * index)で、各

  • 要素に遅延時間を設定します。indexに200を掛けることで、前の要素よりも200ms遅れてアニメーションが開始されます。
    .animate({ opacity: 1 }, 500)で、opacityを1に500msかけてアニメーションさせます。

    どちらを選ぶべきか？

    JavaScript:
    外部ライブラリを読み込む必要がないため、ページのロード時間が短縮され、パフォーマンスが向上する可能性があります。
    より詳細なアニメーション制御が必要な場合や、特定のブラウザ互換性に対応する必要がある場合に適しています。
    現代のWeb開発ではCSS transitionやanimationと組み合わせるのが一般的です。

    jQuery:
    コードが簡潔で、より少ない行数で同じ効果を実現できます。
    古いブラウザでの互換性を気にしなくて良い場合や、既にプロジェクトでjQueryを使用している場合に便利です。
    最近のWeb開発では、CSSのtransitionやanimationプロパティを使ってアニメーションを実装し、JavaScriptでクラスの付け外しを行うのが一般的です。これにより、アニメーションのパフォーマンスが向上し、JavaScriptのコードもシンプルになります。上記の「素のJavaScript」の例は、このアプローチを採用しています。

    参考ページ
    https://ai-partners-llc.com/blog/

ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ