テキストを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