[英]How to make a smooth type writer effect transition via hovering from one tab to another?
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. 假定发生的情况是,当您将鼠标悬停在选项卡上时,将在保存内容的同级div中的主内容区域子div中显示内容。 Initially the details div style is to hide the contents, but upon hover it is displayed.
最初,Details div样式是隐藏内容,但将鼠标悬停时将显示它。
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.
我更喜欢Vanilla JS解决方案,但是如果需要的话,我会选择一个Jquery。
For your convience I provided a fiddle below the code. 为了方便起见,我在代码下方提供了一个小提琴。
Here is the HTML 这是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 的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/ 小提琴-> http://jsfiddle.net/9djfa2L2/3/
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. 您看到的故障是因为每次对
simpleTypeEffect
调用都将安排一个函数每50毫秒执行一次,该函数仅在刷新所有文本内容后才会清除自身。
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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.