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

Posted 2023-05-08

【中文标题】解决 jQuery UI 在动画时不考虑边距的问题

【英文标题】：Work around for when jQuery UI doesn't account for margins when animating

【发布时间】：2018-12-14 10:21:54

【问题描述】：

-你好，世界！-

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

当一个元素有一个底边距并且在页面上使用盲动画来显示它时，在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>

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

【参考方案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>

【讨论】：

我现在正坐在办公桌前头晕目眩，只是在选项之间反复来回点击，脸上带着笑容。这完美地工作。非常感谢！

啊哈哈哈。精彩的！ :D