0

我在这里有一个我试图解释在代码笔中工作的演示：https ://codepen.io/voronroga/pen/gOgWjdj

我有一个基本表：

<table>
    <tbody>
        <tr>
            <td>Cell Contents</td>
            <td class="del">x</td>
        </tr>
        <tr>
            <td>Cell Contents</td>
            <td class="del">x</td>
        </tr>
        <tr>
            <td>Cell Contents</td>
            <td class="del">x</td>
        </tr>
    </tbody>
</table>

使用 JavaScript/jQuery 我想slideUp()在单击该行中的删除按钮后使用 jQuery 动画来隐藏表格行。但是，表格行上没有播放动画（请参阅上面链接的代码笔）。

$('td.del').on('click', e => delCel(e));

function delCel(e) {
  // What I want to work:
  // $(e.target).parent().slideUp(1000);
  // What actually Works:
  $(e.target).parent().hide(1000);
}

因为slideUp()，动画不播放，超时后元素突然消失。至少hide()淡化文本和单元格边框，直到隐藏后，该行突然从表格中弹出。

那么如何让表格行向上滑动，就像它在其上方的行下方移动一样，并将该行下方表格中的元素与它一起向上拖动以获得平滑的动画？我的猜测是 jQuery 不太有能力做到这一点，所以如果我必须使用其他东西，我想这就是我要走的路。

如果最终更容易，请随意建议一种在 CSS/JS 中执行此操作的方法。

4

1 回答 1

0 
table,
tr, td{
  border: 1px solid black;
}

table {
  min-height:200px;
}

td.del {
  padding: 3px 8px;
  cursor: pointer;
}

但它可能不是你所期望的。

于 2021-04-04T05:14:23.917 回答