[jQuery]opacityで非表示にした文字を順番にフェードインさせる。

html

<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>

例えば上のように段落がありますが、これを最初は非表示にし、順番にフェードインさせたいときってありますよね。
cssとjavascript（要jQuery）に以下のように記述することで簡単にできます。

css

p {
  opacity: 0;
}

javascript

$(function(){

  var delaySpeed = 1000; // 1秒ずつ遅らせる
  var fadeSpeed = 1000; // 1秒かける

  $(window).on('load', function() {

    $('p').each(function(i){
      $(this).delay(i*(delaySpeed)).animate({
        'opacity' : '1'
      },fadeSpeed);
    });

  });

});

これを一文字ずつ行いたい場合は、一文字ずつspanなどで囲ってしまうのが楽です。
ただ手書きで一文字ずつ囲うのはあまりに非効率。
そんな作業はjsにやってもらいましょう。

変更点はjsのみです。

javascript

$(function(){

  $("p").children().addBack().contents().each(function(){
    if (this.nodeType == 3) {
      var $this = $(this);
      $this.replaceWith($this.text().replace(/(\S)/g, "<span>$&</span>"));
    }
  });

  var delaySpeed = 1000; // 1秒ずつ遅らせる
  var fadeSpeed = 1000; // 1秒かける

  $(window).on('load', function() {

    $('p').each(function(i){
      $(this).delay(i*(delaySpeed)).animate({
        'opacity' : '1'
      },fadeSpeed);
    });

  });

});

簡単ですね。

参考：jQueryで文章などのテキストに対して一文字ずつ個別に装飾を変える実験 | BlackFlag