TypeIt JQuery插件：鍵入完成時刪除光標

我使用typeit.jquery.js插件，當一個段落列表開始顯示一個接一個。一切工作正常，只是我無法管理的一件事：當在特定行上輸入完成時，請刪除cursor。TypeIt JQuery插件：鍵入完成時刪除光標

插件有一個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>

來源

2016-06-28 Teuta Koraqi

特塔 -

樂意幫助這一點。 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() { 
 
     
 
     \t $('.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>

來源

2016-06-29 12:39:34

TypeIt JQuery插件：鍵入完成時刪除光標

回答

相關問題