我为带有进度条的花哨标签编写了一些脚本。 它是有效的，但我遇到了一个问题：我使用延迟来使进度条运行，当你点击1然后3,4或任何其他选项卡，然后返回1 - 遇到问题：进度条断开并留下彩色部分。
var numberold = -1;
function check(number) {
var name = "year" + number;
var nameold = "year" + numberold;
var nametab = "tab" + number;
var nametabold = "tab" + numberold;
var circlename = "circle" + number;
var circlenameold = "circle" + numberold;
if (numberold === -1) {
numberold = number;
} else {
//if (numberold != number) {
document.getElementById(nameold).style.color = '#D7D7D7';
document.getElementById(nametabold).style.visibility = 'hidden';
document.getElementById(nametabold).style.opacity = '0';
// if new tab later then old
if (number > numberold) {
var u = numberold;
var i = numberold;
(function() {
if (i < number) {
var linename = "line" + i;
document.getElementById(linename).style.width = '100%';
setTimeout(arguments.callee, 300);
i++;
}
})();
(function() {
if (u <= number) {
var circlenameold = "circle" + u;
document.getElementById(circlenameold).style.backgroundColor = '#DBA741';
setTimeout(arguments.callee, 300);
u++;
}
})();
}
// if new tab earlier then old
else {
var u = numberold;
var i = numberold-1;
(function() {
if (i >= number) {
var linename = "line" + i;
document.getElementById(linename).style.width = '0%';
setTimeout(arguments.callee, 300);
i--;
}
})();
(function() {
if (u > number) {
var circlenameold = "circle" + u;
document.getElementById(circlenameold).style.backgroundColor = '#D7D7D7';
setTimeout(arguments.callee, 300);
u--;
}
})();
//}
}
}
// style the active tab
document.getElementById(circlename).style.backgroundColor = '#DBA741';
document.getElementById(name).style.color = '#DBA741';
document.getElementById(nametab).style.visibility = 'visible';
document.getElementById(nametab).style.opacity = '1';
numberold = number;
}
check(0); .year {
color: #D7D7D7;
width: 14.28%;
float: left;
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
}
.years {
margin-left: 10px;
color: #D7D7D7;
cursor: pointer;
padding-top: 20px;
padding-bottom: 20px;
user-select: none;
}
.step {
width: 14.28%;
float: left;
position: relative;
}
.line {
height: 5px;
background-color: #D7D7D7;
width: 100%;
margin-left: 50%;
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.line-done {
width: 0%;
height: 100%;
background-color: #DBA741;
-webkit-transition: width .3s ease;
-o-transition: width .3s ease;
transition: width .3s ease;
}
.circle-base {
width: 10px;
height: 10px;
position: absolute;
bottom: -3%;
left: 50%;
background-color: #D7D7D7;
border-radius: 100%;
}
.column {
width: 20%;
float: left;
padding: 5px;
}
.block {
box-shadow: 0px 1px 5px 1px #D7D7D7;
padding: 5px;
}
.title {
color: #DBA741;
}
.tab-base {
position: absolute;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
.progress-body {
height: 5px;
width: 88%;
margin: 10px auto;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.col-xs-12 {
width: 100%;
float:left;
}
}<div class="col-xs-10 col-xs-offset-1 text-center hidden-xs hidden-sm">
<div class="row">
<div class="col-xs-12" style="padding-bottom: 20px;">
<div class="row">
<div class="step">
<div class="years" onclick="check(0)" id="year0">
1964 - 1971
</div>
<div id="circle0" class="circle-base"></div>
<div class="line">
<div id="line0" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(1)" id="year1">
1964 - 1971
</div>
<div id="circle1" class="circle-base"></div>
<div class="line">
<div id="line1" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(2)" id="year2">
1964 - 1971
</div>
<div id="circle2" class="circle-base"></div>
<div class="line">
<div id="line2" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(3)" id="year3">
1964 - 1971
</div>
<div id="circle3" class="circle-base"></div>
<div class="line">
<div id="line3" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(4)" id="year4">
1964 - 1971
</div>
<div id="circle4" class="circle-base"></div>
<div class="line">
<div id="line4" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(5)" id="year5">
1964 - 1971
</div>
<div id="circle5" class="circle-base"></div>
<div class="line">
<div id="line5" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(6)" id="year6">
1964 - 1971
</div>
<div id="circle6" class="circle-base" style="bottom: -12%;"></div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div id="tab0" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab1" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab3" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab4" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab5" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab6" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
你可以试试这个
现在我累了，不知道如何解决这个问题。 我需要知道如何更改算法或找到独特的解决方案。 有人可以帮忙吗？
答案 0 :(得分：0)
在完成上一个动画之前，您需要阻止任何动画。
我添加了两个变量finished1＆amp; finished2只有在完成所有动画后才会true
如果函数check(number)在false时被激活..函数必须等到它们变为true
就像交通信号一样;）
查看已修改的 JavaScript
var numberold = -1;
var finished1 = true;
var finished2 = true;
function check(number) {
if(!finished1 || !finished2) {
window.setTimeout(function(){ check(number) }, 100);
return;
}
var name = "year" + number;
var nameold = "year" + numberold;
var nametab = "tab" + number;
var nametabold = "tab" + numberold;
var circlename = "circle" + number;
var circlenameold = "circle" + numberold;
if (numberold === -1) {
numberold = number;
} else {
finished1 = false;
finished2 = false;
//if (numberold != number) {
document.getElementById(nameold).style.color = '#D7D7D7';
document.getElementById(nametabold).style.visibility = 'hidden';
document.getElementById(nametabold).style.opacity = '0';
// if new tab later then old
if (number > numberold) {
var u = numberold;
var i = numberold;
(function() {
if (i < number) {
var linename = "line" + i;
document.getElementById(linename).style.width = '100%';
setTimeout(arguments.callee, 300);
i++;
} else {
finished1 = true;
}
})();
(function() {
if (u <= number) {
var circlenameold = "circle" + u;
document.getElementById(circlenameold).style.backgroundColor = '#DBA741';
setTimeout(arguments.callee, 300);
u++;
} else {
finished2 = true;
}
})();
}
// if new tab earlier then old
else {
var u = numberold;
var i = numberold-1;
(function() {
if (i >= number) {
var linename = "line" + i;
document.getElementById(linename).style.width = '0%';
setTimeout(arguments.callee, 300);
i--;
} else {
finished1 = true;
}
})();
(function() {
if (u > number) {
var circlenameold = "circle" + u;
document.getElementById(circlenameold).style.backgroundColor = '#D7D7D7';
setTimeout(arguments.callee, 300);
u--;
} else {
finished2 = true;
}
})();
//}
}
}
// style the active tab
document.getElementById(circlename).style.backgroundColor = '#DBA741';
document.getElementById(name).style.color = '#DBA741';
document.getElementById(nametab).style.visibility = 'visible';
document.getElementById(nametab).style.opacity = '1';
numberold = number;
}
check(0); .year {
color: #D7D7D7;
width: 14.28%;
float: left;
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
}
.years {
margin-left: 10px;
color: #D7D7D7;
cursor: pointer;
padding-top: 20px;
padding-bottom: 20px;
user-select: none;
}
.step {
width: 14.28%;
float: left;
position: relative;
}
.line {
height: 5px;
background-color: #D7D7D7;
width: 100%;
margin-left: 50%;
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.line-done {
width: 0%;
height: 100%;
background-color: #DBA741;
-webkit-transition: width .3s ease;
-o-transition: width .3s ease;
transition: width .3s ease;
}
.circle-base {
width: 10px;
height: 10px;
position: absolute;
bottom: -3%;
left: 50%;
background-color: #D7D7D7;
border-radius: 100%;
}
.column {
width: 20%;
float: left;
padding: 5px;
}
.block {
box-shadow: 0px 1px 5px 1px #D7D7D7;
padding: 5px;
}
.title {
color: #DBA741;
}
.tab-base {
position: absolute;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
.progress-body {
height: 5px;
width: 88%;
margin: 10px auto;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.col-xs-12 {
width: 100%;
float:left;
}
}<div class="col-xs-10 col-xs-offset-1 text-center hidden-xs hidden-sm">
<div class="row">
<div class="col-xs-12" style="padding-bottom: 20px;">
<div class="row">
<div class="step">
<div class="years" onclick="check(0)" id="year0">
1964 - 1971
</div>
<div id="circle0" class="circle-base"></div>
<div class="line">
<div id="line0" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(1)" id="year1">
1964 - 1971
</div>
<div id="circle1" class="circle-base"></div>
<div class="line">
<div id="line1" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(2)" id="year2">
1964 - 1971
</div>
<div id="circle2" class="circle-base"></div>
<div class="line">
<div id="line2" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(3)" id="year3">
1964 - 1971
</div>
<div id="circle3" class="circle-base"></div>
<div class="line">
<div id="line3" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(4)" id="year4">
1964 - 1971
</div>
<div id="circle4" class="circle-base"></div>
<div class="line">
<div id="line4" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(5)" id="year5">
1964 - 1971
</div>
<div id="circle5" class="circle-base"></div>
<div class="line">
<div id="line5" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(6)" id="year6">
1964 - 1971
</div>
<div id="circle6" class="circle-base" style="bottom: -12%;"></div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div id="tab0" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab1" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab3" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab4" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab5" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab6" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>