型付けされたlibary - 同じクラスの要素

Question

要するに、同じクラスの要素をappendで追加してから、typed.jsを使ってそれらをアニメーション化したいと思います。私はこれのために少し機能を書いた、残念ながらそれに問題があります。以前の文字列はすべてループしており、円では同じ効果がアニメーション化されます。これをどうやって変更できますか？ （でも以前に追加するもの）http://www.mattboldt.com/demos/typed-js/

function animateConsole(string) { 
 
    $("#console-content").append('<p class="bash-line"></p>'); 
 
    $(".bash-line").each(function() { 
 
     var typed = new Typed(this, { 
 
     strings: [string], 
 
     typeSpeed: 10, 
 
     showCursor: false, 
 
    }); 
 
    }); 
 
} 
 

 
$(document).ready(function) { 
 

 
    setTimeout(function() {animateConsole('<span>//</span>GET CONNECTION SECRET');}, 3500); 
 
    setTimeout(function() {animateConsole('<span>//</span>SENDING REQUEST');}, 4500); 
 
    setTimeout(function() {animateConsole('<span>//</span>WAITING FOR RESPONSE');}, 6500); 
 

 
});

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

 
<div id="console-content"></div>

Answer 1

ライン$(".bash-line").each(ターゲットすべて.bash-line要素

だからあなたがの参照を保持する必要があります。

このlibary Typedプラグインを初期化するときに作成したプラグインを使用してください。

function animateConsole(string) { 
 
    var bash = $('<p class="bash-line"></p>'); 
 
    
 
    $("#console-content").append(bash); 
 
    var typed = new Typed(bash.get(0), { 
 
     strings: [string], 
 
     typeSpeed: 10, 
 
     showCursor: false, 
 
    }); 
 
} 
 

 
$(document).ready(function() { 
 

 
    setTimeout(function() {animateConsole('<span>//</span>GET CONNECTION SECRET');}, 3500); 
 
    setTimeout(function() {animateConsole('<span>//</span>SENDING REQUEST');}, 4500); 
 
    setTimeout(function() {animateConsole('<span>//</span>WAITING FOR RESPONSE');}, 6500); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.6/lib/typed.min.js"></script> 
 

 
<div id="console-content"></div>