如何使用jQuery删除具有一定效果的css类

How to remove css class with some effect using jQuery?

本文关键字：css 何使用 jQuery 删除 具有一      更新时间：2023-09-26

我有HTML表。这是其中一行：

<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中做到这一点？有可能吗？

你可以用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/

注意：这只是为了淡入/淡出颜色，做一些类似"推"或"拉"的动画需要多个元素（我相信）。

此外，这里还有一个很好的资源，用于支持浏览器的许多功能：http://caniuse.com/#feat=css-转换（此链接将直接带您进入CSS transitions）

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

点击此处查看更多信息：http://api.jquery.com/animate/

相关文章：