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

Question

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

如果您单击该按钮，它就会出现。没有动画。我想让它滑动。谁能解释为什么它会这样而不是滑动？

谢谢！

<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

A table 的高度无法更改 - 它只会增长到其内容的大小，因此 jQuery slideDown 依赖于动画高度，它不会工作。

只需将您的 table 包裹在一个 span 中并制作动画：

<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>

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

jquery slidedown causing elements to simply appear

jquery

slidedown