如何使用jQuery去除某些效果的css類？

我有HTML表格。這是行之一：如何使用jQuery去除某些效果的css類？

<tr class="mattersRow"> 

    <td colspan="4"> … </td> 
    <td class="editableCell qbmatter" colspan="14"> … </td> 
    <td class="editableCell workDate" colspan="4"> … </td> 
    <td class="editableCell hours" colspan="2"> … </td> 
    <td class="editableCell person" colspan="6"> … </td> 
    <td class="rate" colspan="2"> … </td> 
    <td class="editableCell amount" colspan="4"> … </td> 
    <td align="center"> 
     <input id="check4" type="checkbox"></input> 
    </td> 

</tr>

最後一列包含複選框。當我檢查/取消選中時，我想爲此行添加/刪除css類。

$("input[type=checkbox]").click(function() {  
      if ($(this).is(':checked')) { 
       // Mark this Row Yellow 
       $(this).closest('tr').addClass('warning');       
      } 
      else { 
       // Remove Yellow mark and put back danger if needs 
       $(this).closest('tr').removeClass('warning'); 
      } 
     });

該課程使整排黃色。基本上我想這樣做有一些效果。例如，當我取消選中，這個「黃色」正在下降...如何在jQuery中做到這一點？可能嗎？

來源

2013-12-12 Bryuk

http://jsfiddle.net/eh3ER/ – voodoo417

你能提供的樣品代碼？我不熟悉轉換... – Bryuk

你可以用CSS做到這一點，但它只會在現代瀏覽器功能，支持CSS transitions：

tr { 
    -webkit-transition : background-color 500ms ease-in-out; 
    -moz-transition : background-color 500ms ease-in-out; 
    -ms-transition : background-color 500ms ease-in-out; 
    -o-transition : background-color 500ms ease-in-out; 
    transition : background-color 500ms ease-in-out; 
}

這裏是一個演示：http://jsfiddle.net/eh3ER/1/

注意：這只是淡入/淡出顏色，做一些類似「推」或「拉」的動畫需要多個元素ts（我相信）。

而且，這裏是許多功能瀏覽器支持的一個很好的資源：http://caniuse.com/#feat=css-transitions（此鏈接將直接帶您到CSS transitions）

來源

2013-12-12 22:15:02 Jasper

謝謝！這很有趣=）將花費一些時間閱讀轉換=） – Bryuk

@Bryuk看看MDN文檔，如果你還沒有，他們是偉大的：https：//developer.mozilla.org/en-US/docs/Web/CSS /過渡 – Jasper

-1

$(this).closest('tr').animate({ backgroundColor: 'red'}, '2000');

多看這裏：

來源

2013-12-12 22:08:15 douweegbertje

不，我需要刪除這個類，而不僅僅是改變背景 – Bryuk

如果沒有jQuery插件，顏色不能動畫：'例如，寬度，高度或左側可以是動畫，但背景可以是背景 - 顏色不能，除非使用jQuery.Color（）插件'，來源：http://api.jquery.com/animate/ – Jasper

然後，像我一樣在該類中創建動畫。如果你閱讀我的鏈接，你會看到你可以添加一切。更改寬度等。移除鑽頭的Visa適用。 – douweegbertje

如何使用jQuery去除某些效果的css類？

回答

相關問題