表的jQuery幻灯片动画

Question

我实现了一个能够使用滑动动画显示/隐藏表格行或列内容的函数。

代码的作用：

1. 检索列的所有单元格（th，td）
2. 在<div class="wrapper" />
中包装每个单元格的内容
3. 使用jQuery.animate（）;
为包装器div的width设置动画
4. 完成后，打开单元格内容（删除div）

我需要包装div的原因是因为jQuery无法直接对表格单元格执行幻灯片动画 - 请参阅How to Use slideDown (or show) function on a table row?

请参阅此 codepen 以获取代码和演示。我删除了尽可能多的JS代码来演示我的问题。 （您可以忽略html和css，它们不包含相关信息）

除了一个（两个？）问题外，一切都适用于行和列：

• 当列缩小时，如果没有足够的空间，内容最终会开始包装。当发生这种情况时，细胞高度突然增加，导致跳跃。

• 当单元格内容不需要其单元格的整个空间时，此内容的节目动画更快，导致输出难看。



我想要实现的是不断变化的宽度而不影响布局。其他列不得受到影响。 有什么想法我能做到吗？

Answer 1

您可以将div嵌套在另一个隐藏溢出的div中：

.crop {
    overflow:hidden; 
    width:100px
}
.inner { 
    min-width:300px; 
    width:auto; 
}

http://jsfiddle.net/mikatalk/7xwLjp2e/