亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何實現html表格漸變顏色

如何實現html表格漸變顏色

紅糖糍粑 2024-01-11 14:23:03
我正在使用 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>


查看完整回答
反對 回復 2024-01-11
  • 1 回答
  • 0 關注
  • 147 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號