TypeIt JQuery 插件：输入完成后移除光标

Question

我正在使用 typeit.jquery.js 插件，当段落列表开始一个接一个地显示时。一切正常，只有一件事我无法处理：完成特定行的输入后，删除 cursor.

插件有一个 attribute cursor: false，但它从一开始就带走了 cursor。我在函数 callback: function(){} 中使用了相同的属性，一个在输入完成后执行的函数，但它似乎不起作用。

如有任何帮助，我们将不胜感激！

  $('.typeit-box3').typeIt({
    strings: 'First Paaragraph',
    typeSpeed: 100,
    autoStart: true,
    callback: function() {
    $('.typeit-box4').typeIt({
        strings: 'Second paragraph',
        typeSpeed: 100,
        autoStart: true,
        callback: function(){
          $('.typeit-box5').typeIt({
              strings: 'Third Paragraph',
              typeSpeed: 100,
              autoStart: true

              })
    }
    
    });
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/4.2.3/typeit.min.js"></script>
<ul>
    <li class="list" focus-next>
              <div class="typeit-box3"></div>
            </li>
            <li class="list" focus-next>
              <div  class="typeit-box4"></div>
            </li>
            <li class="list" focus-next>
 
              <div  class="typeit-box5" contenteditable></div>
             
            </li>
</ul>

Answer 1

泰达语 --

很乐意为此提供帮助。 TypeIt 的每个实例的光标都有一个 'ti-cursor' class，因此，要在键入后隐藏每个光标，您只需要定位每个实例的 class，并抛出一个额外的 class 那里的显示设置为 none。

因为光标具有内联样式，您需要将“[style]”添加到选择器并使用 !important 标志。

在此处查看我的示例。注意这样的行：

$('.typeit-box3').find('.ti-cursor').addClass('is-hidden');

抱歉给您带来了困难 - 希望这对您有所帮助！

$('.typeit-box3').typeIt({
  strings: 'First Paaragraph',
  typeSpeed: 100,
  autoStart: true,
  callback: function() {
  
    $('.typeit-box3').find('.ti-cursor').addClass('is-hidden');
    $('.typeit-box4').typeIt({
      strings: 'Second paragraph',
      typeSpeed: 100,
      autoStart: true,
      callback: function() {
      
       $('.typeit-box4').find('.ti-cursor').addClass('is-hidden');
        $('.typeit-box5').typeIt({
          strings: 'Third Paragraph',
          typeSpeed: 100,
          autoStart: true

        })
      }
    });
  }
});

.is-hidden[style] {
  display: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/4.2.3/typeit.min.js"></script>
<ul>
  <li class="list" focus-next>
    <div class="typeit-box3"></div>
  </li>
  <li class="list" focus-next>
    <div class="typeit-box4"></div>
  </li>
  <li class="list" focus-next>
    <div class="typeit-box5" contenteditable></div>
  </li>
</ul>

Answer 2

例如：

$(function () {
  new TypeIt("#section01", {
    speed: 45,
    cursor: false,
  })
    .type("Hello.")
    .pause(500)
});

您可以添加一个属性：cursor:false来删除光标。引用的 js 链接如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/5.0.2/typeit.min.js"></script>

更多信息，您可以阅读typeit的旧版本文档： https://www.typeitjs.com/docs/v7

TypeIt JQuery 插件：输入完成后移除光标

TypeIt JQuery Plugin: Remove cursor when typing has completed

html

jquery