我有一個按鈕，單擊以顯示表格行：
$(document).ready(function() {
$("label.deathzone-toggle").click(function() {
$("tr.deathzone").toggleClass("show");
});
});tr.deathzone td {
display: none;
}
tr.deathzone.show td {
display: table-cell;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="custom-control-label deathzone-toggle" for="customSwitches">Show Deathzone Inducements</label>一切正常，但我正在嘗試淡入/淡出行，我嘗試過淡入（“慢”）；但它不起作用。我也嘗試添加transition:opacity 1.5s ease;到 css 中，但這也不起作用？有點卡住！！
uj5u.com熱心網友回復：
只需使用 .fadeIn("slow") 同時將“tr”的顯示屬性更改為 none 而不是它的“td”。
tr.deathzone {
display: none;
}
2個例子：
https://jsfiddle.net/somidmm/03tn69kx/
function test() {$("#2").fadeToggle("slow");}
https://jsfiddle.net/somidmm/ad6bjh8c/
$(document).ready(function() {
$("label.deathzone-toggle").click(function() {
$("tr.deathzone").fadeToggle("slow");
});
});
uj5u.com熱心網友回復：
你不能像你希望的那樣轉換顯示屬性，但你可以轉換不透明度，這會產生相同的效果？！
$(document).ready(function() {
$("label.deathzone-toggle").click(function() {
$("tr.deathzone").toggleClass("show");
});
});tr.deathzone td {
display: table-cell;
opacity:0;
background:white;
transition:ease-in-out all 250ms;
}
tr.deathzone.show td {
opacity:1;
display: table-cell;
background:pink;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="custom-control-label deathzone-toggle" for="customSwitches">Show Deathzone Inducements</label>
<table>
<tr class='deathzone'>
<td>.... some content</td>
</tr>
</table>uj5u.com熱心網友回復：
代替
tr.deathzone td {
display: none;
}
tr.deathzone.show td {
display: table-cell;
}
利用
tr.deathzone td {
opacity: 0;
visibility: hidden;
height: 0;
transition: opacity 0.5s ease;
}
tr.deathzone.show td{
opacity: 1;
visibility: visible;
height: auto;
}
和相同的 jquery
$(document).ready(function() {
$("label.deathzone-toggle").click(function() {
$("tr.deathzone").toggleClass("show");
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395225.html
下一篇：請求被其他資料覆寫