QA@IT

(解決済み)JavaScriptでテキストを1文字ずつ表示させるアニメーション

5356 PV

JavaScript(jQuery含む)の勉強をしながらFirefox OS用アプリを開発しているのですが、行き詰まったので助けてください。
DIVの中の文字をすべて拾い上げて、指定した別のDIVにテキストを1文字ずつ表示させるアニメーションを作っています。

[css]

#cont{
    z-index:1;
    position:absolute;
    top:0;
}

#sauce{
    z-index:0;
    visibility:hidden;
    position:absolute;
    top:0;
}

 
[html]

<div id="cont">
</div>

<div id="sauce">
#!/bin/bash<br>
hoge hoge hoge
</div>

 
とありまして、DIV ID「sauce」の内容が長いのでこういう変な書き方をしています。

 
[JS]

<script>
$(document).ready(function(){
    var numLength=0;//文字の長さ
    var totalNum=$("#sauce").html().length;//テキスト全部の長さ

    function display(){
        var configText=$("#sauce").html();//DIV「sauce」の中身を取得
        if(numLength <= totalNum){//テキストの終わりまで表示
            var pickupText=configText.substr(0, numLength);//文字数を指定して抽出
            $("#cont").html(pickupText);//DIV「cont」に表示
            numLength++;
        }else{
            return;
        }
    }

    setTimeout(function(){//これも動いてくれません
        display(true);
    }, 500);
});
</script>

 
これでエラーは出ていません。
「numLength」を変数ではなくて「100」と打つと一応100文字は表示されます。
ただしアニメーションにはなっていません。

どこが間違っているのか、色々試したのですがわからず、ヒントだけでも頂けないでしょうか。
よろしくお願い致します。

回答

ウォッチ

この質問への回答やコメントをメールでお知らせします。