jquery jQuery で文字列を順番に表示する

2013年5月1日

jQuery のアニメーション(fadeIn)を使って、指定した要素の文字列を順番に表示する方法。

  • デフォルトでは、指定された要素の文字を全て1文字ずつ順番に表示する
  • セパレータが指定されたら、セパレータで区切られた文字列を順番に表示する
  • text() メソッドで指定された要素のテキスト(text_strings)を取得する
  • 取得したテキストの文字数(max_text_count)を取得する
  • 指定された要素のテキストを空にする
  • セパレータが指定されていれば、split() メソッドで文字列を分割し、その数を取得する
  • セパレータも表示する場合は、セパレータを文字列に戻す
  • 文字(または文字列)の span 要素を生成し、指定された要素に fadeIn() メソッドを使って表示する
  • 文字(または文字列)の数だけ再帰的(?)に繰り返す
  • 終了時には文字列を元に戻す。(span 要素とsplit()によるカンマを削除)
  • 表示速度も指定可能
//文字列を順番に表示する関数
//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>

上記のような p 要素がある場合、次のように記述する。

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

サンプル:
以下をクリックすると、1文字ずつ順に表示。serial_text(‘p#serialtext’);

アニメーション を表示する 領域

以下をクリックすると、半角スペースで分割した文字列を順に表示。serial_text(‘p#serialtext’, 400, ‘ ‘);
(セパレータは削除されるので2回目以降のクリックでは、全体が表示される)

アニメーション を表示する 領域

以下をクリックすると、半角スペースで分割し、セパレータを戻して文字列を順に表示。serial_text(‘p#serialtext’, 400, ‘ ‘, true);

アニメーション を表示する 領域