jQuery слайд, заставляя элементы просто появляться - PullRequest
Новая
       22

jQuery слайд, заставляя элементы просто появляться

0 голосов
/ 06 декабря 2018

Я пытаюсь заставить метод 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>

1 Ответ

0 голосов
/ 06 декабря 2018

Высота таблицы не может быть изменена - она ​​просто увеличивается до размера ее содержимого, поэтому jQuery slideDown полагается на анимацию высоты, она не будет работать.

Просто оберните ваш стол в промежуток и анимируйте что: 

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