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

我正在构建一个HTML表单，它需要一些简单的条件字段被打开/关闭的可能性。我的问题与jQuery动画和对象高度在动画处于转换时未被保留有关。这导致了动画转换中的跳跃式跳跃。jQuery显示/隐藏动画，保持对象的高度，直到动画完成

看到这个小提琴，以便更好地理解这个问题：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>

来源

2016-07-06 TNF

请重要的代码添加到您的问题。而不仅仅是代码的链接。 – imtheman

使用完整的代码更新了问题。 – TNF

两个第一个div有CSS浮动属性。所以你需要清除下一个div的这种行为。我加第三格后clear:both性质，它给：

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

来源

2016-07-06 22:38:42

是的，我做了更好的可视化动画问题。如果浮动被删除，动画中仍然可以看到轻微的跳跃。 – TNF

请看看我的编辑，我对第一个链接做了一个错误，现在更新了 –

优秀。这是一个令人讨厌的问题的简单解决方案。非常感谢！ – TNF

当你有不同的浮动对象到右侧和左侧，你必须clear:both在第三和第四对象清除浮空效果。

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

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

来源

2016-07-06 22:39:57

这太棒了，谢谢！这是一个令人讨厌的问题的简单解决方案。 – TNF

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

回答

相关问题