javascript - 如何使用 jQuery 删除具有某些效果的 css 类？

Question

我有 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 中执行此操作？可能吗？

Answer 1

你可以用 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-transitions (此链接将带您直接转到 CSS transitions)