如何通过悬停从一个选项卡到另一个选项卡来实现流畅的打字机效果转换

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

本文关键字：选项 实现 打字机 转换 另一个 何通过 一个 悬停      更新时间：2023-09-26

假设发生的情况是，当您将鼠标悬停在选项卡上时，内容显示在主内容区域中，子div来自保存内容的同级div。最初，details-div样式是隐藏内容，但悬停时会显示。

现在，我所解释的是它应该发生的，然而悬停效果是虚幻和不稳定的。如何实现从一个选项卡悬停到另一个选项卡的无缝转换？我更喜欢VanillaJS解决方案，但如果需要的话，我会选择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();

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

您看到的故障是因为每次对simpleTypeEffect的调用都会安排每50毫秒执行一个函数，只有当所有文本内容都已刷新时，该函数才会自行清除。

要修复它，你只需要在开始新的效果之前检查是否已经有效果，如果发现效果就停止：

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