テキストを1文字ずつフェードインさせる方法

デモ

コード

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h1 id="title">Sample Text</h1>

CSS

#title {
    color: #fff;
    font-size: 48px;
}

JS

$(function() {
    var $allMsg = $('#title');
    var $wordList = $('#title').html().split("");
    $('#title').html("");
    $.each($wordList, function(idx, elem) {
        var newEL = $("<span/>").text(elem).css({ opacity: 0 });
        newEL.appendTo($allMsg);
        newEL.delay(idx * 70);
        newEL.animate({ opacity: 1 }, 1100);
    });
});

参考

・Fade in letter by letter with JQuery - Stack Overflow