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

Teuta -

很高兴为此提供帮助。 TypeIt的每个实例的游标都有一个'ti-cursor'类，因此，为了在键入后隐藏每个游标，你只需要定位每个实例的类，并在那里抛出一个显示设置为none的附加类。。

由于光标具有内联样式，因此您需要使用！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 {
  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>

TypeIt JQuery插件：键入完成后删除光标

1 个答案: