[jQuery]子要素を順番に表示させる方法

タイトルの通り。

構築環境
組み方
実用化

構築環境

jQuery3系

組み方

<style>
.target li{
    opacity: 0;
    transition: opacity 0.5s ease;
}
.target li.show{
    opacity: 1;
}
</style>
<ul class="target">
    <li>aaaaaaaa</li>
    <li>aaaaaaaa</li>
    <li>aaaaaaaa</li>
</ul>

$(function(){
    $(window).on('load resize scroll', function(){
        var target = $('.target');
        target.each(function(){
            var countCheck = $(this).children().length;
            for(var i = 0; i < countCheck; i++){
                var delayCnt = 500 * i;
                $(this).children().eq(i).delay(delayCnt).queue(function(){$(this).addClass('show');})
            }
        })
    })
})

display:none;だと表示が崩れるんでフェードイン系ならopacityが安定。opacityならclassの付与をjsで操作するに限ったほうがシンプルでいいと思う。まあ.css()でもいいけど。

注意点として、.delay()の後に.addClass()を書いても動かない仕様がある。
.queue()でやっていく感じになる。

実用化

これをこのまま使うと一括で作用するので表示領域外に達するくらい子要素が多い場合は考えもの。「小分けでフェードインしたい」となった場合は工夫が必要になる。

    <style>
        li{
            display: flex;
        }
        li div{
            flex: 1;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        li div.show{
            opacity: 1;
        }
    </style>
    <ul class="target">
        <li>
            <div>aaaaaaaaaa</div>
            <div>aaaaaaaaaa</div>
            <div>aaaaaaaaaa</div>
        </li>
        <li>
            <div>aaaaaaaaaa</div>
            <div>aaaaaaaaaa</div>
            <div>aaaaaaaaaa</div>
        </li>
        <li>
            <div>aaaaaaaaaa</div>
            <div>aaaaaaaaaa</div>
            <div>aaaaaaaaaa</div>
        </li>
        <li>
            <div>aaaaaaaaaa</div>
            <div>aaaaaaaaaa</div>
            <div>aaaaaaaaaa</div>
        </li>
        <li>
            <div>aaaaaaaaaa</div>
            <div>aaaaaaaaaa</div>
            <div>aaaaaaaaaa</div>
        </li>
    </ul>

階層を一つ増やす。イメージとしては、表示された<li>の<div>に上記jsを適用。

表示されたら、の条件は以前の記事の内容でどうにかなるはず。

こんな感じか。

$(function(){
    $(window).on('load resize scroll', function(){
        var target = $('.target li');
        var nowPosition = $(window).scrollTop();
        var windowHeight = $(window).height();
        target.each(function(){
            var targetPosition = $(this).offset().top;
            if(nowPosition + windowHeight > targetPosition){
                var countCheck = $(this).children().length;
                for(var i = 0; i < countCheck; i++){
                    var delayCnt = 500 * i;
                    $(this).children().eq(i).delay(delayCnt).queue(function(){$(this).addClass('show');})
                }
            }
        })
    })
})

デモ

やっぱり行毎に分けるとか、一定量で区切るとか、そういう感じにするのが無難。ついでにフェードインの見栄え的にブラウザ上に複数の<li>が同時に表示しづらい構成にするのがいいように思う。

タイミングをうまいこと操作すれば、ここみたいな感じのが組めると思う。