【jQuery】 文字を交互に表示する

目玉焼き

jQueryを使って文字を交互に表示させてみる

DEMO

DEMOはコチラ

ソース

<div id="header-text">
  <div id="text-1" class="text-item">テキスト1だよ</div>
  <div id="text-2" class="text-item none">テキスト2だよ</div>
  <div id="text-3" class="text-item none">テキスト3だよ</div>
</div>

<style>
  .none {
    display: none;
  }
  #header-text {
    background: #6370c1;
    color: #fff;
    text-align: center;
    padding: 10px;
  }
</style>
<!-- jQueryをCDNで読み込み -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
    $(function() {
        // 3秒ごとにtoggleText関数を実行する
        window.setInterval(toggleText, 3000);
    });

    let current_index = 1; // 今表示するテキストのindex
    let next_index = current_index + 1; // 次に表示するテキストのindex
    const max_count = $('.text-item').length; // テキストの総数

    function toggleText() {
        // 今表示されているテキストをfadeOutする
        $("#header-text").find(`#text-${current_index}`).fadeOut('slow', function() {
            // 次に表示するテキストをfadeInする
            $("#header-text").find(`#text-${next_index}`).fadeIn(600);
            // 今表示されているテキストのindexを更新する
            current_index = next_index;
            // 次表示するテキストのindexを更新する
            next_index++;
            // テキストの総数に達した場合はリセット (一番初めのテキストに戻す)
            if(next_index > max_count){
                next_index = 1;
            }
        });
    }
</script>
ポイント
  • 一番初めのテキスト以外は、noneクラスを付与して非表示
  • window.setIntervalを使用して、
    toggleText関数を一定期間ごと(ここでいうと3000ミリ秒 = 3秒)に呼び出す
  • toggleText関数では、
    #header-text内にある#text-XXXの要素の表示切り替えを行う
  • 前の要素がfedeOut されてから次の要素をfadeInするために、
    fadeOutのコールバック関数の中でfadeInするようにする
  • max_count(要素のトータル数) に達すると再度初めのテキストに戻る

$("#header-text").find(`#text-${current_index}`)

のような記法は、下記記事のテンプレートリテラルを使用。

\ 案件のご依頼・ご相談はこちらから /