Question

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

要更好地了解问题，请查看此小提琴：https://jsfiddle.net/n3frxf6m/4/

勾选复选框后，它会用条件字段＃3替换默认输入字段＃4。

我尝试了几种方法，包括将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>，但它无法解决问题。

是否有一种优雅的方式来制作这样流畅的动画/隐藏动画？

{{1}}

Answer 1

两个第一个div具有CSS浮动属性。所以你需要为下一个div清除这种行为。我在clear:both属性之后添加了第三个div，它给出了：

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

Answer 2

由于右侧和左侧有不同的浮动物体，您必须通过clear:both清除第3和第4个物体上的浮动效果。

#visible{clear:both}
#hidden{clear:both}

请查看fiddel：https://jsfiddle.net/n3frxf6m/3/

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

2 个答案: