一文字ずつファードインするアニメーションを作りたい。 改行の間には、インターバルをいれたい。

Question

前提・実現したいこと

一文字ずつファードインするアニメーションを作りたい。
改行の間には、インターバルをいれたい。

発生している問題・エラーメッセージ

一文字づつフェードインするアニメーションは作成できたが、改行するときに一定時間止まるアニメーションを入れる方法がわかりません。

該当のソースコード

    <div id="container">
        <p class="typ">テキストテキストテキスト</p>
        <p class="typ">テキストテキストテキストテキスト</p>
        <p class="typ">テキストテキストテキストテキスト</p>
        <p class="typ">テキストテキストテキストテキスト</p>
    </div>

$(function() {
  $('.typ').each(function(){
    var spans=[];
    $.each($(this).text().split(''),function(){
      spans.push($('<span>').css({opacity:0}).text($(this).get(0)));
    });
    $(this).empty().append(spans);
  });
  $('.typ span').each(function(x){
    $(this).delay(x*70).animate({'opacity':1},1000);
  });
});

Comments

[H40831]

やってみたことを追記してください

[yambejp]

改行とはなんのことでしょう？
・pの区切りのことなのか（見た目上の改行）
・\nのことなのか
・<br>のことなのか
（かりに<br>だとすると.typはタグを含む可能性があるのでしょうか？）

Answer 1

こんな感じでどうでしょう。

var cnt = 0;
$('.typ').each(function(w){
  $('span', this).each(function(x){
    cnt += x;
    $(this).delay(cnt*70).animate({'opacity':1},1000);
  });
  cnt += 10; // delay
}); // 未テスト

Comments

[x_x]

//cnt += x;
cnt++;

[kei344]

To: x_xさん
あ、そうですね。