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/