在这段代码中,动画会在 Chrome 浏览器重新加载时立即开始。我希望特定选项卡的动画在它的按钮被点击或自动打开时开始。意味着每当屏幕或该选项卡对屏幕动画可见时开始,而不是在屏幕不可见时
<ul id="tabs">
<li>
<a data-toggle="tab" href="#about">dart</a>
</li>
<li>
<a data-toggle="tab" href="#advantages">PHP</a>
</li>
<li>
<a data-toggle="tab" href="#usage">CSS</a>
</li>
<li>
<a data-toggle="tab" href="#usage">Python</a>
</li>
<li>
<a data-toggle="tab" href="#usage">java</a>
</li>
</ul>
// code for typewriter animation
<script type="text/javascript">
document.onload = function setupTypewriter(t) {
var HTML = t.innerHTML;
t.innerHTML = "";
var cursorPosition = 0,
tag = "",
writingTag = false,
tagOpen = false,
typeSpeed = 100,
tempTypeSpeed = 0;
var type = function() {
if (writingTag === true) {
tag += HTML[cursorPosition];
}
if (HTML[cursorPosition] === "<") {
tempTypeSpeed = 0;
if (tagOpen) {
tagOpen = false;
writingTag = true;
} else {
tag = "";
tagOpen = true;
writingTag = true;
tag += HTML[cursorPosition];
}
}
if (!writingTag && tagOpen) {
tag.innerHTML += HTML[cursorPosition];
}
if (!writingTag && !tagOpen) {
if (HTML[cursorPosition] === " ") {
tempTypeSpeed = 0;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + 50;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + 50;
writingTag = false;
if (tagOpen) {
var newSpan = document.createElement("span");
t.appendChild(newSpan);
newSpan.innerHTML = tag;
tag = newSpan.firstChild;
}
}
cursorPosition += 1;
if (cursorPosition < HTML.length - 1) {
setTimeout(type, tempTypeSpeed);
}
};
return {
type: type
};
}
var typer = document.getElementById('typewriter3');
typewriter = setupTypewriter(typewriter3);
typewriter.type();
</script>
// code for auto switching tabs
<script type="text/javascript">
$(document).ready(function () {
var timeInterval, tabCount = 0, currnetIndex = 1;
tabCount = $('ul#tabs').find('li a').length;
var tabContentObj = $('.tabContent');
changeTabIndex();
timeInterval = setInterval(function () { changeTabIndex(); }, 20 * 1000);
function changeTabIndex() {
if (currnetIndex > tabCount) {
currnetIndex = 1;
}
tabContentObj.hide();
$('ul#tabs').find('li.selected').removeClass('selected');
var currentAncorObj = $('ul#tabs').find('li a').eq(currnetIndex - 1);
currentAncorObj.parent().addClass('selected');
$(currentAncorObj.attr('href')).show();
currnetIndex++;
};
$('#tabs li').mouseenter(function () {
clearInterval(timeInterval);
}).mouseleave(function () {
timeInterval = setInterval(function () { changeTabIndex(); }, 4 * 5000);
});
$('#tabs li a').click(function () {
tabContentObj.hide();
$('ul#tabs').find('li.selected').removeClass('selected');
var currentAncorObj = $(this);
currnetIndex = $('ul#tabs').find('li a').index($(this)) + 1;
currentAncorObj.parent().addClass('selected');
$(currentAncorObj.attr('href')).show();
currnetIndex++;
//return false;
});
$(document).ready(function(){
$('.active').tab('show');
});
});
</script>