我正在使用 HTML 表格，需要以某種方式實(shí)現(xiàn)漸變顏色。我想要的結(jié)果是立即添加一個(gè)red類，然后這個(gè)顏色會(huì)逐漸變成黃色。我搜索并想出了下面的代碼，但我不知道如何申請(qǐng)transition: all 1s ease-in-out;。有什么方法可以實(shí)現(xiàn)這一點(diǎn)嗎？$("td").click(function() { $("td").addClass("red");});table { border-collapse: collapse;}td { border: solid black 1px; height: 50px; width: 50px; cursor: pointer; /* transition: all 1s ease-in-out; */}.red { background-color: red;}.yellow { background-color: yellow}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table> <tr> <td></td> </tr></table>
1 回答
千巷貓影
TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊
把它放在課堂transition上yellow。然后，在添加類之前，您需要稍微延遲一下以允許.red添加該類.yellow。50ms應(yīng)該足夠了。嘗試這個(gè)：
$("td").click(function() {
var $td = $(this).addClass("red");
setTimeout(() => $td.addClass('yellow'), 50);
});
table { border-collapse: collapse; }
td {
border: solid black 1px;
height: 50px;
width: 50px;
cursor: pointer;
}
.red { background-color: red; }
.yellow {
background-color: yellow;
transition: background-color 1s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td></td>
</tr>
</table>
- 1 回答
- 0 關(guān)注
- 161 瀏覽
添加回答
舉報(bào)
0/150
提交
取消