解决 jQuery UI 在动画时不考虑边距的问题

Question

-你好，世界！-

标题很好地总结了我正在努力解决的问题。我找不到任何有这个确切问题的问题，我不确定我是否做错了什么。

当一个元素有一个底边距并且在页面上使用盲动画来显示它时，在show()的结尾和hide()的开头会有一个margin大小的跳转。

有人问过类似的问题，人们说将元素包装在另一个 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>