用点击按钮改变复选框的颜色，一次从上到下淡出一个
问题描述：
如何创建一个“进度条”样式（就像它正在加载）从原始颜色从上到下淡入淡入新颜色对于这些检查复选框在他们的透视检查顺序一次一个，而不是点击按钮后一次全部复选框？用点击按钮改变复选框的颜色，一次从上到下淡出一个
我的CSS转换不起作用。
这是我的代码的一个例子。我希望我能够解释得很好。
$("button").click(function() {
$("table").toggleClass("alternative");
});table.example1, table.example1 th, table.example1 td {
border: 3px solid grey;
max-width: 200px;
}
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
display:inline-block;
padding: 6px 60px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: white;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: transparent;
background-repeat: repeat-x;
}
input[type=checkbox]:checked + label{
background-color: #3e618b;
outline: 0;
}
.alternative input[type=checkbox]:checked + label{
-moz-transition: height .10s ease-in;
-o-transition: height .10s ease-in;
-webkit-transition: height .10s ease-in;
transition: height .10s ease-in;
background-color: #5093e4;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="example1" style="width:40%;" align='center'>
<tr>
<td>
<input type="checkbox" id="chk1" name="chk" value="1">
<label for="chk1"> 1</label>
</td>
<td>
<input type="checkbox" id="chk2" name="chk"value="2">
<label for="chk2"> 2</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk3" name="chk" value="3">
<label for="chk3"> 3</label>
</td>
<td>
<input type="checkbox" id="chk4"name="chk" value="4">
<label for="chk4"> 4</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk5"name="chk"value="5">
<label for="chk5"> 5</label>
</td>
<td>
<input type="checkbox" id="chk6"name="chk"value="6">
<label for="chk6"> 6</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk7"name="chk"value="7">
<label for="chk7"> 7</label>
</td>
<td>
<input type="checkbox" id="chk8"name="chk"value="8">
<label for="chk8"> 8</label>
</td>
</tr>
</table>
<button>Changes checked checkbox color</button>
答
不知道这是你在寻找什么，但是，因为你只修改background-color属性，你想你的过渡到监视（不高）。另外，将它放在未经检查的输入上可以让它在从它转换到检查的样式时发生。
$("button").click(function() {
$("table").toggleClass("alternative");
});table.example1, table.example1 th, table.example1 td {
border: 3px solid grey;
max-width: 200px;
}
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
display:inline-block;
padding: 6px 60px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: white;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: transparent;
background-repeat: repeat-x;
transition: background-color 2s ease-in;
}
input[type=checkbox]:checked + label{
background-color: #3e618b;
outline: 0;
}
.alternative input[type=checkbox]:checked + label{
-moz-transition: background-color .10s ease-in;
-o-transition: background-color .10s ease-in;
-webkit-transition: background-color .10s ease-in;
transition: background-color 2s ease-in;
background-color: #5093e4;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="example1" style="width:40%;" align='center'>
<tr>
<td>
<input type="checkbox" id="chk1" name="chk" value="1">
<label for="chk1"> 1</label>
</td>
<td>
<input type="checkbox" id="chk2" name="chk"value="2">
<label for="chk2"> 2</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk3" name="chk" value="3">
<label for="chk3"> 3</label>
</td>
<td>
<input type="checkbox" id="chk4"name="chk" value="4">
<label for="chk4"> 4</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk5"name="chk"value="5">
<label for="chk5"> 5</label>
</td>
<td>
<input type="checkbox" id="chk6"name="chk"value="6">
<label for="chk6"> 6</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk7"name="chk"value="7">
<label for="chk7"> 7</label>
</td>
<td>
<input type="checkbox" id="chk8"name="chk"value="8">
<label for="chk8"> 8</label>
</td>
</tr>
</table>
<button>Changes checked checkbox color</button>
答
看看下面的代码。
$("button").click(function() {
$(".overlay").css('top', '0px');
});table.example1, table.example1 th, table.example1 td {
border: 3px solid grey;
max-width: 200px;
}
td {
overflow: hidden;
position: relative;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: #3e618b;
top: -60px;
left: 0;
z-index: 0;
transition:top 1s linear;
}
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: white;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-repeat: repeat-x;
transition: top 1s linear;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
}
input[type=checkbox]:checked ~ .overlay{
top: 0;
}
.alternative input[type=checkbox]:checked + label{
-moz-transition: height .10s ease-in;
-o-transition: height .10s ease-in;
-webkit-transition: height .10s ease-in;
transition: height 1s ease-in;
background-color: #5093e4;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="example1" style="width:40%;" align='center'>
<tr>
<td>
<input type="checkbox" id="chk1" name="chk" value="1">
<label for="chk1"> 1</label>
<div class="overlay"></div>
</td>
<td>
<input type="checkbox" id="chk2" name="chk"value="2">
<label for="chk2"> 2</label>
<div class="overlay"></div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk3" name="chk" value="3">
<label for="chk3"> 3</label>
<div class="overlay"></div>
</td>
<td>
<input type="checkbox" id="chk4"name="chk" value="4">
<label for="chk4"> 4</label>
<div class="overlay"></div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk5"name="chk"value="5">
<label for="chk5"> 5</label>
<div class="overlay"></div>
</td>
<td>
<input type="checkbox" id="chk6"name="chk"value="6">
<label for="chk6"> 6</label>
<div class="overlay"></div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk7"name="chk"value="7">
<label for="chk7"> 7</label>
<div class="overlay"></div>
</td>
<td>
<input type="checkbox" id="chk8"name="chk"value="8">
<label for="chk8"> 8</label>
<div class="overlay"></div>
</td>
</tr>
</table>
<button>Changes checked checkbox color</button>+0
当我点击按钮而不是在复选框上时，这个叠加层怎么会发生？ –
+0
我编辑了我的代码，请检查。 – izulito
+0
好吧，在您的示例中，覆盖图是在用户选中该框时发生的，然后当单击该按钮时，所有复选框都会获得覆盖图，如果已选中或未选中，则无关紧要。我正在寻找的是在用户选中复选框（其转向颜色＃3e618b）后，用户单击该按钮，只有选中的复选框才会覆盖（颜色＃5093e4）。只有在用户选中了该框并按下按钮后，叠加层才会出现在被选中的框上。我怎么做？ –
我只是希望把它从顶部渐变为底部的按钮被点击后。你如何做到这一点，所以它是每次检查复选框，而不是一次全部？就好像用户选中了框1,4,7。我怎样才能使它从1开始，一旦完成，它会改变颜色4，然后7？ –