jQuery slideToggle 只显示和隐藏但不能正确设置动画

Question

在this example我的 div 容器只是隐藏和显示但不执行 awesome jQuery animation .

$('.button').click(function() {
    $('.class1').slideToggle();
});

谁能告诉我为什么？我知道表格上的动画无法正常工作，但在 div 上应该没问题。

更新感谢所有的答案。我缺少的信息是绝对位置从 DOM 中删除元素。是的，我知道我应该将样式放在 css 中——这个版本只是为了快速测试，但感谢您的回答!!!

Answer 1

.slideToggle() 使元素的高度在 0% - 100% 之间设置动画，同时隐藏其子项。

通过在整个 fiddle 中使用 position:absolute，您正在从 DOM 流中移除子元素并干扰父元素逐渐隐藏其子元素的能力。

如果您将 overflow 设置为 hidden，并从子项中删除 position:absolute，这将正常工作。

http://jsfiddle.net/7xzMa/6/