Question

-您好，世界！-

标题给出了我所苦苦挣扎的相当不错的摘要。我找不到任何有这个确切问题的问题，而且我不确定自己做错了什么。

当元素上有一个底部空白并且使用盲动画将其显示在页面上时，在show()的末尾和{{1}的开始处，空白的大小会发生跳跃}。

有人问过类似的问题，人们说要将该元素包装到另一个div中，然后在其上使用隐藏/显示，但这对我来说还没有解决。

到目前为止我所拥有的：

hide()

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

如果有人可以提供帮助，我将不胜感激。我已经坚持了一段时间了。

Answer 1

非常简单的解决方法：如果您使用slideUp＆slideDown更改show＆hide并减小持续时间效果更好，没有任何“跳跃”。

$('#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>

解决当动画时jQuery UI不考虑边距的情况

1 个答案: