如何通過從一個選項卡懸停到另一個選項卡來使平滑的類型編寫器效果過渡？

Question

假定發生的情況是，當您將鼠標懸停在選項卡上時，將在保存內容的同級div中的主內容區域子div中顯示內容。 最初，Details div樣式是隱藏內容，但將鼠標懸停時將顯示它。

現在，我所解釋的發生了應有的變化，但是懸停效果是虛偽和不穩定的。 我如何從一個選項卡懸停到另一個選項卡的過渡似乎很順利？ 我更喜歡Vanilla JS解決方案，但是如果需要的話，我會選擇一個Jquery。

為了方便起見，我在代碼下方提供了一個小提琴。

這是HTML

 <div id="container">
    <div id="leftTabs">
        <div class="tabs">tab 1</div>
        <div class="tabs">tab 2</div>
        <div class="tabs">tab 3</div>
    </div>
    <div id="mainContent">
        <h2>H2 Heading</h2>
            <div>
               <div id="re1" class="details" style="display: none;">This is the RE1 Div <strong>content</strong>

               <p>Paragraph of content RE1</p>
               <ul>
                  <li>item1</li>
                  <li>item2</li>
                  <li>item3</li>
               </ul>
               <p>Another Paragraph</p>
               </div>

               <!-- more details etc -->

               <div id="re6" class="details" style="display: none;">This is the RE6 Div <strong>content</strong>

               <p>Paragraph of content RE6</p>
               <ul>
                  <li>item1</li>
                  <li>item2</li>
                  <li>item3</li>
               </ul>
               <p>Another Paragraph</p>
               </div>    
           </div>
     </div>

    <div id="rightTabs">
       <div class="tabs">tab 4</div>
       <div class="tabs">tab 5</div>
       <div class="tabs">tab 6</div>
    </div>
 </div>

的JavaScript

var print =document.getElementById("mainContent").getElementsByTagName("div")[0];
var typeEffectCalled = false;

function simpleTypeEffect(sentence, stopBool) {
    var index = 0;
    var timer = setInterval(function () {
        var myChar = sentence.charAt(index);

        if (myChar === '<') {
            index = sentence.indexOf('>', index);
        }
        document.getElementById("mainContent").getElementsByTagName("div")[0].innerHTML = sentence.substr(0, index);
        index++;

        if (sentence.length === index) {
            clearInterval(timer);
            stopBool(false);
        }
    }, 50);
}

function displayInfo(){
   var tabs = document.getElementsByClassName("tabs");
   var details = document.getElementsByClassName("details");

   function generateContent(content, func){
      return function(){
         print.innerHTML = simpleTypeEffect(content, func);
      }
   }

   for(var i = 0; i<tabs.length; i++){
      if(typeEffectCalled === false){
         tabs[i].addEventListener("mouseover", generateContent(
            details[i].innerHTML, function(x){typeEffectCalled = x}
         ), false);
      }
      typeEffectCalled = true;
   }

}

displayInfo();

小提琴-> http://jsfiddle.net/9djfa2L2/3/

Answer 1

您看到的故障是因為每次對simpleTypeEffect調用都將安排一個函數每50毫秒執行一次，該函數僅在刷新所有文本內容后才會清除自身。

要解決此問題，您只需要在開始新效果之前檢查是否已經在運行一種效果，如果發現一個效果就停止：

var currentEffect;

function simpleTypeEffect(sentence) {
  var index = 0;
  if (currentEffect)
    clearTimeout(currentEffect);
  currentEffect = setInterval(function(){ /* omitted*/}, 50);
}