jQuery：要素を時間差でフェードイン表示する。

多くのサイトで使われている、要素を時間差で出現させるアニメーション。
実装方法もいろいろあり、便利なライブラリなども多いのですが、今回はjQueryを使用した実装をご紹介。

動作イメージです。

実装してみる

HTML

<li>要素が表示させたい要素郡です。任意の共通クラス名をつけてください。

<button href="" id="click">click!</button>
<button href="" id="hide">hide!</button>
<ul>
        <li class="js-fadeIn orange">１</li>
        <li class="js-fadeIn green">２</li>
        <li class="js-fadeIn red">３</li>
        <li class="js-fadeIn yellow">４</li>
        <li class="js-fadeIn gray">５</li>
        <li class="js-fadeIn pink">６</li>
</ul>

CSS

関係のないスタイルは割愛してます。任意のクラス名（今回はshow）が付与された時に要素が表示されるようにします。スタイルはお好みで。今回は transform: rotateX; にしました。起き上がる感じが最近の好みです…

li{
    transform: rotateX(90deg);
}
li.show{
    transition-duration: 1s;
    transform: rotateX(0);
}

javascript

// 要素を表示させるfunction
function fadeIn(){
    $('.js-fadeIn').each(function(i){
        let delay = 100;  // 0.1秒ずつずれます。好きな秒数に調整してください。
        $(this).delay(i * delay).queue(function(next){
            $(this).addClass('show');
            next();
        });
    })
};

// 要素を表示させるクリックイベント
$('#click').on('click', function(){
    fadeIn();
});

// 要素を非表示にするクリックイベント
$('#hide').on('click', function(){
    $('.js-fadeIn').removeClass('show');
});

ちょっと補足

jQueryの動き

対象の要素に「show」クラスを時間差で付与しています。
addClass()ではなくfadeIn()でも実装可能です。

fadeIn()にする場合は初期スタイルを display: none; に設定してください。
スタイル関係の調整は出来るだけCSSに記述したいため、addClass()を使用していますが、fadeIn()の方がお手軽ですかね。。。

// jQueryデフォルトのfadeIn()メソッドで実装。
function fadeIn(){
    $('.js-fadeIn').each(function(i){
        let delay = 100;  // 0.1秒ずつずれます。好きな秒数に調整してください。
        $(this).delay(i * delay).fadeIn();
    })
};

queue()について

jQueryのEffect系メソッドです。addClass()を時間差で付与したい場合によく紹介されています。

fadeIn()などのjQueryのEffect系メソッドは、非同期（書いた順に動かない）のjavascriptと違って、上から順に効果をかけてくれるのでアニメーションを調整しやすいのですが、クラス付与の役割を持ったEffectメソッドはありません。そのため、時間差実行を実現するためにqueue()のコールバック関数で実行してあげるパターンが多いようです。

queue()の使い方

$target.queue(function(next){  // queue(ここにコールバック関数入れます。)
    $target.addClass('hoge');    // 実行したい処理を書きます。
    next();　　　　　　　　　　　　　// next()で次の処理へ。dequeueと同じ役割です。
});

使用例

function changeColor(){
    $('.js-change').each(function(i){
        let delay = 200;
        $(this).delay(i * delay).animate({ top : '0' }, 300);
        $(this).delay(i * delay).queue(function(next){
            $(this).css('transform', 'rotate(1080deg)');
            next();
        })
        $(this).delay(i * delay).queue(function(next){
            $(this).addClass('pink');
            next();
        })
    })
}

実務には必要ない動きを実装している時がいちばん楽しいかもしれない…

おまけ

少し処理を追加することで、よく見かける
「スクロールして画面に入ったらふわっと表示」も実装できます。

function scrollFadeIn(){
    $('.js-fadeIn').each(function(i){
        const WINDOW_HEIGHT = $(window).scrollTop();
        const TARGET_HEIGHT = $(this).offset().top - 300;

        if( WINDOW_HEIGHT > TARGET_HEIGHT){
            // 画面に入ったらinを付与しておく。
            $(this).addClass('in');
            // inが付いているターゲット要素にshowを付与していく。
            $('.js-fadeIn.in').each(function(i){
                let delay = 100;
                $(this).delay(i * delay).queue(function(next){
                    $(this).addClass('show');
                    next();
                })
            })
        }
    })
}

こっちの方が実際の案件では使ったりします。
ブログサイトのカード型記事表示を順番にフェードインする時など。

いろいろカスタマイズしてみてください。

参考

jQueryのEffect系一覧
https://api.jquery.com/category/effects/