Web Design Leaves

//文字列を順番に表示する関数
//target：文字列を順番に表示する要素を指定
//speed：表示するスピード（オプション。デフォルトは100）
//sep：セパレータ（分割文字）。1文字ずつではなく、セパレータで区切った文字列を表示する場合に指定
//sep_back：セパレータ（分割文字）を文字列に戻して表示するかどうか。真偽地（デフォルト：false）
var text_count = 0;  //表示した文字（列）の数（初期化しておく）
var text_strings;  //表示する文字列
var max_text_count;//文字（列）の数。関数内で指定された要素から文字数を取得
var text_disp_speed;  //文字（列）を表示するスピード
var separator_back;  //セパレータを文字列に戻して表示するかどうか。
var separator;  //セパレータ（分割文字）。（デフォルト：'' 空文字）
function serial_text(target,speed,sep, sep_back) {      
  if(text_count === 0) {  //初回のみ実行
    var target$ = $(target);
    text_disp_speed = speed || 100;  //速度が指定してあればそれを代入し、なければデフォルトの100に
    separator_back = sep_back ? true : false;  //セパレータを文字列に戻して表示するかどうかを指定
    separator = sep || '';  //セパレータを指定
    text_strings = target$.text();  //テキストを取得
    max_text_count = text_strings.length;  //テキストの文字数を取得
    target$.text('');  //指定された要素のテキストを空にする
    if(separator) {  //セパレータが指定されていれば
      text_strings = text_strings.split(separator);  //セパレータで文字列を分割
      max_text_count = text_strings.length;  //その数を取得  
      if(separator_back) {
        for(var i=0; i < max_text_count -1 ; i++) {  //文字列にセパレータを戻す
          text_strings&#91;i&#93; += separator;
        }
      }        
    }
  }else if(text_count == max_text_count) {  //表示した文字数がテキストの文字数に達したら終了
    $(target).text(text_strings.toString().replace(/,/g, ''));  //文字列を最初の状態に戻す
    text_count = 0;  //表示した文字（列）の数をリセット
    return;
  }    
  //span 要素を生成してそれを非表示にし、分割した文字（列）を順番に表示していく
    $('<span>').css('display', 'none').text(text_strings[text_count]).appendTo(target).fadeIn(text_disp_speed, function(){
      text_count ++;  //表示した文字（列）の数をインクリメント
       serial_text(target);    //再帰的（？）に繰り返す（第2、第3、第4パラメータは省略）
     });
}

<p id="serialtext" >アニメーション を表示する 領域</p>

serial_text('p#serialtext');  //1文字ずつ順番に表示
serial_text('p#serialtext', 400, ' ');  //半角スペースで分割した文字列を順番に表示
serial_text('p#serialtext', 400, ' ', true);  //同上（セパレータも表示）