How to make a smooth type writer effect transition via hovering from one tab to another?

Question

What is suppose to happen, is when you hover over a tab, content is displayed in the main content area child div from a sibling div that holds the content. Initially the details div style is to hide the contents, but upon hover it is displayed.

Now what I explained happens as it should, however the hover effect is figidity and erratic. How can I have seemless transition from hovering from one tab to another? I prefer a Vanilla JS solution, but I will settle for a Jquery one if need be.

For your convience I provided a fiddle below the code.

Here is the 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();

Fiddle --> http://jsfiddle.net/9djfa2L2/3/

Answer 1

The glitch you are seeing is because each call to simpleTypeEffect schedules a function to be executed every 50 ms that clear itself only when all text content has been flushed.

To fix it, you just need to check if there's already an effect running before starting a new one, and stop if one is found:

var currentEffect;

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