我正在使用typeit.jquery.js插件,当一个段落列表开始一个接一个地显示时。一切都很好,只有一件事我做不到:当特定行的输入完成时,删除cursor
插件有一个attributecursor: 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>

最佳答案

日耳曼--
很乐意帮忙。TypeIt的每个实例的游标都有一个“ti cursor”类,因此,要在键入后隐藏每个游标,只需将每个实例的类作为目标,并在其中抛出一个显示设置为none的附加类。
因为光标有内联样式,所以需要使用!重要的标志。
请看我的例子。注意下面这些行:
$('.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>

关于jquery - TypeIt JQuery插件:键入完成后删除光标,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38075222/

10-11 23:33