jQuery緩慢擠壓表

Question

我使用jQuery隱藏和顯示錶中的行。

這裏是我的jsfiddle：http://jsfiddle.net/Nbf75/5/

注意，當你點擊一個問題，在回答幻燈片，但它squishes的問題。 它不這樣做，如果你沒有設置動畫，但我想要的動畫（不一定是預設的緩慢動畫，但任何動畫squishes它。）

那麼，如何讓動畫不壓扁的問題？

編輯：這發生在Chrome，但在Firefox中沒有在任何其他瀏覽器尚未

Answer 1

這是的渲染引擎如何處理表格單元格的僞影。您可以通過將答案（在td內）包裝在div中，並直接在div上操作來解決此問題。 td將跟隨（因爲它自動調整大小），並且所有瀏覽器的效果都是相同的。

See it in action。

Answer 2

只需使用淡出和淡入，而不是顯示和隱藏沒有測試。你將達到預期的效果而不會出現壓扁現象。

實施例：

$('table tr td.question').toggle(function() { 
    $($(this).parent('tr').next('tr').children('.answer')).fadeOut('slow'); 
}, function() { 
    $($(this).parent('tr').next().children('.answer')).fadeIn('slow'); 
}); 

http://jsfiddle.net/Nbf75/10/