Question

我有一张这样的表：

<table border="0" class="ready-orders">
   <tr>
   </tr>
</table>

用jQuery动态添加td：

$('.ready-orders tr').append('<td style="display: none;"><h1>Random Name</h1><h2>Your order is ready!</h2></td>');
$('.ready-orders tr td:last-child').fadeIn('slow');

但是，那一行中现有的td在他们的新位置上非常不顺利地跳了起来。我想让这个看起来更好，而不使用.animation（）（这样它们可以滑动到新的位置并平滑地改变到新的宽度）。

这是一个fiddle，你可以看到，旧的td向左跳跃是多么明显。

用jQuery做一个漂亮而干净的方法吗？

Answer 1

如果您可以对行应用固定高度，那应该会有所帮助。它经常跳转，因为行调整大小以响应新添加的内容。设置固定高度将阻止在添加内容时调整高度。你只需要知道你可以永远生活在给定的高度内。

Answer 2

将CSS3过渡持续时间设置为tr，如：

tr {
-webkit-transition: all 0.9s ease; 
-moz-transition: all 0.9s ease; 
-o-transition: all 0.9s ease; 
transition: all 0.9s ease; 
}

任何影响tr大小的更改都需要指定的持续时间进行调整。

让我知道它是否有效。

以下是更多了解CSS3过渡（持续时间）的参考。

http://www.w3schools.com/cssref/css3_pr_transition-duration.asp

让td顺利滑动并适应他们的新位置

2 个答案: