Обойти, когда пользовательский интерфейс jQuery не учитывает поля при анимации

Question

- Привет, Мир! -

Название дает довольно приличное резюме того, с чем я борюсь. Я не могу найти какие-либо вопросы, которые имеют именно эту проблему, и я не уверен, что делаю что-то не так.

Когда на элементе есть нижнее поле и для его отображения на странице используется скрытая анимация, происходит скачок, размер которого равен краю конца show() и начала hide().

Были заданы похожие вопросы, и люди говорили, что нужно обернуть элемент в другом элементе div, а затем использовать скрытие / показ, но это не сработало для меня.

Что у меня так далеко:

$('#SelectDemo').on('change', function() {
  if ($('#SelectDemo').val() != undefined && $('#SelectDemo').val().endsWith('~')) {
    $('#ReactivateAlert').show('blind', {}, 1000);
  } else {
    $('#ReactivateAlert').hide('blind', {}, 1000);
  }
});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<div class="container">
  <div id="ReactivateAlert" style="display:none">
    <div class="alert alert-danger alert-dismissible" role="alert">
      When this alert box appears, the margin does not get included in the animation.
    </div>
  </div>
  <div class="col-md-2">
    <label class="col-form-label col-md-2" for="SelectDemo">Table</label>
  </div>
  <div class="col-md-10">
    <select class="form-control" id="SelectDemo" name="SelectDemo">
      <option value="">--- Select a Test ---</option>
      <option value="Test1">Test1</option>
      <option value="Test2">Test2</option>
      <option value="Test3">Test3</option>
      <option value="Test4~">Test4~</option>
      <option value="Test5~">Test5~</option>
      <option value="Test6~">Test6~</option>
    </select>
  </div>
</div>

Если бы кто-нибудь мог помочь, я был бы очень признателен. Я застрял на этом уже некоторое время.

Answer 1

Очень просто обойти: если вы измените показ и скрытие с помощью slideUp и slideDown и уменьшите Длительность эффекта приятнее, и никакого "прыжка" нет.

$('#SelectDemo').on('change', function() {
  if ($('#SelectDemo').val() != undefined && $('#SelectDemo').val().endsWith('~')) {
    $('#ReactivateAlert').slideDown(600);
  } else {
    $('#ReactivateAlert').slideUp(600);
  }
});

        <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="container">
  <div id="ReactivateAlert" style="display:none">
    <div class="alert alert-danger alert-dismissible" role="alert">
      When this alert box appears, the margin does not get included in the animation.
    </div>
  </div>
  <div class="col-md-2">
    <label class="col-form-label col-md-2" for="SelectDemo">Table</label>
  </div>
  <div class="col-md-10">
    <select class="form-control" id="SelectDemo" name="SelectDemo">
      <option value="">--- Select a Test ---</option>
      <option value="Test1">Test1</option>
      <option value="Test2">Test2</option>
      <option value="Test3">Test3</option>
      <option value="Test4~">Test4~</option>
      <option value="Test5~">Test5~</option>
      <option value="Test6~">Test6~</option>
    </select>
  </div>
</div>