在表格行高调整大小时为 slideUp 设置动画答案

【问题标题】：Animate slideUp on table row height resize在表格行高调整大小时为 slideUp 设置动画
【发布时间】：2012-12-11 05:08:54
【问题描述】：

在表格行中显示或隐藏某些 div 后，如何为高度调整设置动画？基本上，在用户在单选组中进行选择并将鼠标悬停在该行之外之后，其他单选选项将被隐藏以压缩表单。如果他们将鼠标移回该行，所有单选选项将再次出现。

如果表格行很好地向上滑动以适应新的高度，我真的很喜欢它，而不是只是消失 [然后重新出现]。这是我的代码：

HERE'S A FIDDLE.

<tr id="range">
    <td>Range</td>
    <td>
        <div class="formStrip">
            <input name="radioRange" type="radio" id="relativeDates" />
            <label for="relativeDates" class="rightSpacer">Relative Dates</label>

            <label for="relativeStart">Start</label>
            <input name="relativeStart" type="text" id="relativeStart" class="inputMarginFix" />

        </div>
        <div class="formStrip">
            <input name="radioRange" type="radio" id="specificDates" />
            <label for="specificDates">Specific Dates</label>
        </div>
    </td>
</tr>

$("#formTable tr").mouseenter(function() {
    $(this).find("input[type='radio']").parent().show();
}).mouseleave(function() {
    $(this).find("input[type='radio']").not(":checked").parent().hide();
});

【问题讨论】：

标签： jquery css css-transitions css-animations

【解决方案1】：

想通了。我想我的代码按原样工作，所以我所要做的就是将 .hide() 和 .show() 更改为 .slideUp() 和 .slideDown()。

$("#formTable tr").mouseenter(function() {
    $(this).find("input[type='radio']").parent().slideDown();
}).mouseleave(function() {
    $(this).find("input[type='radio']").not(":checked").parent().slideUp();
});

【讨论】：