类型化的库 - 同一个类的元素

时间:2017-11-21 22:19:26

标签: jquery typed.js

简而言之,我通过追加添加同一个类的元素,然后我想使用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>

1 个答案:

答案 0 :(得分: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>