文字をゆっくり表示させるが、特定の文字にだけ余韻を持たせたい。

Question

いつもお世話になっております。

文字をゆっくりと表示させるためのjQueryを使用しているのですが、特定の文字にだけ余韻を持たせたいと考えています。
例えば「そうだ、京都、行こう。」であれば、句読点（、）の場合だけdelayを通常より多くしたいと考えています。
以下のようなコードの場合、句読点を判定するにはどのように指定すればいいでしょうか。

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

<!--html-->
<h1>そうだ 京都、行こう。</h1>

また、まったく違った指定方法でも同じように動作するのものであれば構いません。
この指定方法だとすべて一定速度で表示されるため、どうにかして余韻を持たせられないかと試行錯誤しておりました。
どなたか教えて頂けると嬉しいです。

--追記

if文で指定したエレメントにdelayを増やすことはできましたが、続く要素が先に表示されてしまい、うまく余韻が持たせられない状態です。
現状は「そうだ京都行こう。」が先に表示され、句読点である「、」が最後にちょん、ちょん、と表示される状態です。
「そうだ、」で余韻１つ、「京都、」でまた余韻１つ、最後に「行こう。」で終わらせる方法を探しています。

どうぞよろしくお願いします。

Answer 1

↓ここが参考になるのでは。
テキストを1文字ずつフェードインさせる方法 - Qiita
elemに文字が入っていると思うのですが、何か障害がありますか？

コメントを受けて追記

delay()メソッドは、カッコの中の数字分だけアニメーションを遅らせる効果があります。
なので、句読点の場合だけ遅らせるには、カッコの中の数字を大きくすればいいです。

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

コメントを受けて追記

遅延時間を累計すればいいと思いますよ。

$(function() {
    var $allMsg = $('h1');
    var $wordList = $('h1').html().split("");
    $('h1').text("");
    var i = 0;
    $.each($wordList, function(idx, elem) {
        var newEL = $("<span/>").text(elem).css({ opacity: 0 });
        newEL.appendTo($allMsg);
        i += 100;
        if (elem=='、') i += 1000;
        newEL.delay(i);
　　　　　newEL.animate({ opacity: 1 }, 1100);        
    });
});

Comments

[退会済みユーザー]

コメントありがとうございます。
はい、こちらの記事を参考にさせていただきました。
しかし、このコードで作動するのですが、句読点に差し掛かったときにだけ通常よりも遅延させたいと考えています。

[Lhankor_Mhy]

繰り返しになりますが、elemに文字が入っていると思います。
そちらではダメでしたか？　どのような問題が発生していますか？

[退会済みユーザー]

こちらのコードは問題なく作動しておりすべての要素（文字）がspanで囲われております。
問題が発生しているのではありませんが、spanの内容が句読点<span>、</span>のときにだけ、より余韻を持たせて（delayを増やして）動作させる方法を探しています。

[Lhankor_Mhy]

何度も繰り返して申し訳ないのですが、elemに文字が入っています。
当方では、elemを参照してdelayを大きくする方法で句読点だけ遅れて表示できることを確認しています。特段の問題を感じませんでした。

どうも、私と質問者では問題の認識に齟齬があるようです。繰り返しになりますが、現状で起きている具体的な問題をご提示いただけますか？

[退会済みユーザー]

なんどもお答えいただいて申し訳ないです。
もしかしたら、そのelemを参照する方法が僕には分からないのかもしれません。
具体的なコードがありましたら記入していただけると助かります。

[Lhankor_Mhy]

if (elem=='、') { ... }
のように書けばいいのかと思います。
これで分かりますでしょうか？

ご質問者がご提示のコードを理解されている前提で回答申し上げていますが、そうではなくて意味が分からないコードをコピペしているだけなのであれば、もう少し丁寧に回答しますのでその旨をお知らせください。

[退会済みユーザー]

ありがとうございます！

[退会済みユーザー]

elemは参照できましたが、句読点で動きが止まってしまいました。
Lhankor_Mhyさんの方ではどのように指定されたのでしょうか？
分からないので詳しく教えていただけると嬉しいです。

[Lhankor_Mhy]

追記しました。

[退会済みユーザー]

詳細にありがとうございます。
elemの取得とif文とdelayメソッドについての認識が深まりました。

度々申し訳ないのですが、この指定方法ですと「そうだ 京都 行こう。」が先に表示されてから、句読点がちょん、ちょん、と表示されるようになります。
「そうだ、」で余韻１つ、「京都、」でもう１つ、最後に「行こう。」で終わらせようと試してみましたが上手くいかずです。
また今回の場合ですと「、」や「う」が重複しているため、それぞれのエレメントごとに指定を分ける方法も試しましたが上手く動作しませんでした。

この場合ですとif文による指定方法を工夫する必要があるでしょうか？
delayさせた要素が完了するまで、次の要素を表示させない方法はありますでしょうか。
長くなりましたが、お答えいただけますと嬉しいです。

[Lhankor_Mhy]

追記しました。

[退会済みユーザー]

素晴らしい…このくらいはちゃちゃっと出来るように頑張ります。
長い間お付き合い頂いて本当に、本当に、本当にありがとうございました。

Answer 2

$(function() {
var $allMsg = $('h1');
var $wordList = $('h1').html().split("");
$('').text("");

var i = 0;
$.each($wordList, function(idx, elem) {
    var newEL = $("<span/>").text(elem).css({ opacity: 0 });
    newEL.appendTo($allMsg);
    i += 200;

       if (elem=='京') i += 1000;
if (elem=='行') i += 1000;
newEL.delay(i);
newEL.animate({ opacity: 1 }, 1100);
});
});

Comments

[Lhankor_Mhy]

句読点の次の文字を遅らせたいなら、

i += 200;
newEL.delay(i);
if (elem=='、') i += 1000;

とした方が、わかりやすいですよ。