jquery向下滑动，导致元素简单地出现

Question

我正在尝试让slideDown((方法工作，但它似乎对我不起作用。我可以很好地执行FadeIn和FadeOut。我整理了一些示例代码来展示发生在我身上的事情：

http://jsfiddle.net/berwzq54/1/

如果你点击按钮，它就会出现。没有动画。我希望它能滑动。有人能解释为什么它会这样而不是滑动吗？

谢谢！

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="btnAdjustTime" class="btn btn-warning" value="Adjust Time" onclick="$('#tblAdjustTime').slideDown(500);" />
<table id="tblAdjustTime" style="width:100%;display:none;">
<tr>
<td>
<label>Enter a note:</label>
</td>
</tr>
<tr>
<td>
<input id="txtNote" class="form-control" style="height:150px;" placeholder="Explain any clock in/out mistakes here..." onkeydown="return funTrapEnterPress();" />
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
</tr>
<tr>
<td>
<label id="lblAdjustTimeLabel" runat="server">When should your clock IN be?</label>
</td>
</tr>
<tr>
<td>
&nbsp;
<table class="table" style="width:100%;background-color:transparent;">
<tr>
<td class="CenterVertically">
<label>Date:</label>
</td>
<td>
<div class="input-group date" style="width:125px;">
<input id="txtAdjustedDate" runat="server" type="text" class="form-control form-control-condensed" maxlength="10" />
<span class="input-group-addon form-control-condensed"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</td>
</tr>
<tr>
<td class="CenterVertically">
<label>Time:</label>
</td>
<td>
<input id="txtAdjustedTime" runat="server" class="form-control" />
</td>
</tr>
</table>
</td>
</tr>
</table>

Answer 1

表的高度不能更改-它只会增长到其内容的大小，因此jQueryslideDown依赖于设置高度动画，因此它不起作用。

只需将您的桌子包裹在一个跨度中并设置动画即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="btnAdjustTime" class="btn btn-warning" value="Adjust Time" onclick="$('#divAdjustTime').slideDown(500);" />
<div id="divAdjustTime" style="display:none;">
<table id="tblAdjustTime" style="width:100%;">
<tr>
<td>
<label>Enter a note:</label>
</td>
</tr>
<tr>
<td>
<input id="txtNote" class="form-control" style="height:150px;" placeholder="Explain any clock in/out mistakes here..." onkeydown="return funTrapEnterPress();" />
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
</tr>
<tr>
<td>
<label id="lblAdjustTimeLabel" runat="server">When should your clock IN be?</label>
</td>
</tr>
<tr>
<td>
&nbsp;
<table class="table" style="width:100%;background-color:transparent;">
<tr>
<td class="CenterVertically">
<label>Date:</label>
</td>
<td>
<div class="input-group date" style="width:125px;">
<input id="txtAdjustedDate" runat="server" type="text" class="form-control form-control-condensed" maxlength="10" />
<span class="input-group-addon form-control-condensed"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</td>
</tr>
<tr>
<td class="CenterVertically">
<label>Time:</label>
</td>
<td>
<input id="txtAdjustedTime" runat="server" class="form-control" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>