我正在使用 HTML 表格,需要以某種方式實現漸變顏色。我想要的結果是立即添加一個red類,然后這個顏色會逐漸變成黃色。我搜索并想出了下面的代碼,但我不知道如何申請transition: all 1s ease-in-out;。有什么方法可以實現這一點嗎?$("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貢獻1829條經驗 獲得超7個贊
把它放在課堂transition上yellow。然后,在添加類之前,您需要稍微延遲一下以允許.red添加該類.yellow。50ms應該足夠了。嘗試這個:
$("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 關注
- 147 瀏覽
添加回答
舉報
0/150
提交
取消