jQueryアニメーションの表示/非表示、アニメーションが終了するまでオブジェクトの高さを維持

Question

簡単な条件フィールドのオン/オフを切り替える必要のあるHTMLフォームを作成しています。私の問題は、アニメーションが移行中にjQueryアニメーションとオブジェクトの高さが保持されないことに関連しています。これは、アニメーションの遷移でバギージャンプを引き起こしています。

は、問題をよりよく理解するために、このフィドルを参照してください：チェックボックスがチェックされている場合はhttps://jsfiddle.net/n3frxf6m/4/

、それは条件付きのフィールド＃3でデフォルトの入力フィールド＃4を置き換えます。

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

2つの最初のdivはCSS floatプロパティを持ちます。したがって、次のdivのためにこの動作をクリアする必要があります。

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

Answer 2

あなたは、左右に異なる浮動オブジェクトを持っているあなたは3番目と4番目のオブジェクトにclear:bothによって浮遊効果をクリアする必要がありとおり：私はそれを与え、clear:both財産とした後、第三のdivを追加しました。

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

fiddelを確認してください：https://jsfiddle.net/n3frxf6m/3/