【jQuery】要素を時間差フェードイン

0
205

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

完成イメージ。

・HTML

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

<button href="" id="click">click!</button>
<button href="" id="hide">hide!</button>
<ul>
        <li class="js-fadeIn orange">1</li>
        <li class="js-fadeIn green">2</li>
        <li class="js-fadeIn red">3</li>
        <li class="js-fadeIn yellow">4</li>
        <li class="js-fadeIn gray">5</li>
        <li class="js-fadeIn pink">6</li>
</ul>

・CSS

関係のないスタイルは割愛してます。🙇
初期表示でopacity:0;display: none; などをかけてください。
任意のクラス名(今回はshow)が付与された時に要素が表示されるようにします。
(ちなみに、上の完成イメージで使用しているスタイルは
transform: rotateX(90deg)transform: rotateX(0) です。 )

li{
    opacity: 0;
}
li.show{
    transition-duration: 0.5s;
    opacity: 1;
}

・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');
});

ちょっと説明。

  • 対象の要素に「show」クラスを時間差で付与しています。
  • addClass()でなくfadeIn()でも実装可能です。
    • fadeIn()にする場合は初期スタイルをdisplay: none;に設定してください。
    • スタイル関係の調整は出来るだけCSSに記述したいので
      addClass()を使用していますが、こちらはお好みです。
// jQueryデフォルトのfadeIn()メソッドで実装。
function fadeIn(){
    $('.js-fadeIn').each(function(i){
        let delay = 100;  // 0.1秒ずつずれます。好きな秒数に調整してください。
        $(this).delay(i * delay).fadeIn();
    })
};
  • addClass()を時間差で付与したい場合にqueue()がよく使われているようです。
    jQueryのEffect系メソッドです。使い方はこんな感じ。
$target.queue(function(next){  // queue(ここにコールバック関数入れます。)
    $target.addClass('hoge');    // 実行したい処理を書きます。
    next();             // next()で次の処理へ。dequeueと同じ役割
});

おまけ

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

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();
                })
            })
        }
    })
}