【jQuery】文字が1文字ずつ出るアニメーション作成方法

タイトルとか、サイトのキャッチをアニメーションで出す時、
一文字ずつフワッフワッと出てくると「おっ！」ってなるじゃない。
そんな「おっ！」を聞きたくて一文字ずつ出るテキストを作成してみたいと思います。
まずはdemoでどんな感じのアニメか確認してね！
（コメダでブログ更新していたので、たしかコメダのシロノワール？のテキストです）

DEMO

とろ～りなめらかソフトクリームとほんのりココア香る、あったかバウムクーヘン。

もう一度最初からアニメーション

HTML

<p class="demoTxt">とろ～りなめらかソフトクリームとほんのりココア香る、あったかバウムクーヘン。</p>

CSS

.demoTxt {

  display: block;

  opacity:0;

  font-size: 24px;

  font-weight: bold;

  text-align: center;
}
.demoTxt span {

  opacity: 0;

  -webkit-transition: .6s ease-in-out;

  transition: .6s ease-in-out;
}

jQuery

// アニメーションさせたいクラス
var container = $(".demoTxt");
// アニメーションスピード
var speed = 80;

// テキストの間にスペースを入れます
var content = container.html();
var text = $.trim(content);
var newHtml = "";

// スペースで区切ったテキストを、テキストの数だけspanで囲む
text.split("").forEach(function(v) {

 newHtml += '<span>' + v + '</span>';
});

// spanで囲んだテキスト群をHTMLに戻す
container.html(newHtml);

// 1文字ずつ表示
var txtNum = 0;
container.css({opacity: 1});
setInterval(function() {
  container.find('span').eq(txtNum).css({opacity: 1});

 txtNum++
}, speed);