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顯示/隱藏動畫，保持對象的高度，直到動畫完成

回答

相關問題