jquery slidedown causing elements to simply appear

Question

I am trying to get the slideDown() method to work, but it never seems to work for me. I can do FadeIn and FadeOut just fine. I put together some sample code to show what's happening to me:

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

If you click the button, it just appears. No animation. I would like it to slide. Can anyone explain why it's behaving like that instead of sliding?

Thanks!

<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's height cannot be changed - it just grows to be the size of it's content so as jQuery slideDown relies on animating the height, it won't work.

Just wrap your table in a span and animate that:

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