javascript - 表格的 jQuery 幻灯片动画

Question

我实现了一个功能，可以通过滑动动画显示/隐藏表格行或列的内容。

代码的作用:

1. 检索列的所有单元格(th，td)
2. 将每个单元格的内容包装在 <div class="wrapper" /> 中
3. 为 width 制作动画使用 jQuery.animate() 的包装器 div；
4. 完成后，解开单元格内容(移除div)

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

看到这个 codepen 用于代码和演示。我删除了尽可能多的 JS 代码来演示我的问题。 (html和css可以忽略，没有相关信息)

除了一个(两个？)问题外，对于行和列，一切都完美无缺:

• 收缩列时，内容最终会在剩余空间不足时开始换行。发生这种情况时，单元格高度突然增加，导致丑陋的跳跃。

• 当单元格内容不需要其单元格的整个空间时，此内容的动画显示速度会更快，从而导致输出不佳。

我想要实现的是在不影响布局的情况下不断变化的宽度。其他列不得受到影响。我有什么想法可以实现吗？

Answer 1

您可以将您的 div 嵌套在另一个 overflow hidden 的 div 中:

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

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