javascript - タイプライターのようにタイプされているようにテキストを表示する

Question

JavaScript と jQuery を使用して、一度に 1 文字ずつ入力されているようにテキストを表示するにはどうすればよいですか?

コンテンツを非表示にしてから、一度に 1 文字ずつ多くのsetTimeout()呼び出しで表示しようとしましたが、非常に効率が悪いようです。

これを行うためのより良い方法、またはこの効果をシミュレートできるスクリプトまたはプラグインを知っている人はいますか?

点滅カーソルも欲しい！

Answer 1

jQuery タイプライターはこちらから入手できます: https://github.com/chadselph/jquery-typewriter

これがどのように機能するかの例を次に示します。

  $('.someselector').typewrite({
    'delay': 100, //time in ms between each letter
    'extra_char': '', //"cursor" character to append after each display
    'trim': true, // Trim the string to type (Default: false, does not trim)
    'callback': null // if exists, called after all effects have finished
});

Answer 2

ここに私が作った例があります

(function($){$.fn.typeWrite=function(s){
        var o={content:$(this).text(),delay:50,t:this,i:0};
        if(s){$.extend(o,s);}o.t.text('');
        var i=setInterval(function() {
            o.t.text(o.t.text()+o.content.charAt(o.i++));    
            if(o.i==o.content.length){clearInterval(i);}}
        ,o.delay);
      return o.t;  
    };})(jQuery);
    
    $('#test').typeWrite({content:'The stuff to type'});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div id=test></div>