类型化库 - 元素相同 class

Question

简而言之，我通过追加添加相同 class 的元素，然后我想使用 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 元素（甚至是之前附加的元素）

因此您需要保留您刚创建的那个的引用，并在初始化 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>

类型化库 - 元素相同 class

Typed library - elements of the same class

jquery

typed.js