jQuery 显示/隐藏动画，保持对象的高度直到动画完成

Question

我正在构建一个 HTML 表单，它需要打开/关闭一些简单的条件字段。我的问题与 jQuery 动画和对象高度有关，而动画在过渡期间未保留。这会导致动画过渡中出现错误跳跃。

请参阅此 fiddle 以更好地理解问题:https://jsfiddle.net/n3frxf6m/4/

勾选该复选框后，它会将默认输入字段 #4 替换为条件字段 #3。

我尝试了几种方法，包括将 display: none 替换为 visibility: visible 并在脚本中使用 opacity，但它没有解决问题。

有没有一种优雅的方法可以使显示/隐藏动画如此流畅？

 <div style="width: 300px;">
      <div>
        <input type="checkbox" id="show_hide" /> Check me
      </div>

      <div style="float: left;">
        <input type="text" value="Field 1" />
      </div>

      <div style="float: right;">
        <input type="text" value="Field 2" />
      </div>

      <div id="hidden" style="display: none">
        <input type="text" value="Field 3 (conditional field)" />
      </div>

      <div id="visible">
        <input type="text" value="Field 4" />
      </div>

      <div>
        <input type="text" value="Field 5" />
      </div>
</div>

<script>
$('#show_hide').click(function() {
  if ($(this).is(':checked')) {
    $("#hidden").show(500);
    $("#visible").hide(500);
  } else {
    $("#hidden").hide(500);
    $("#visible").show(500);
  }
});
</script>

Answer 1

前两个 div 具有 CSS float 属性。因此，您需要为下一个 div 清除此行为。我在 clear:both 属性之后添加了第三个 div，它给出:

https://jsfiddle.net/n3frxf6m/6/