jQuery slideToggle只显示和隐藏但没有正确动画

Question

在这个例子中,我的div容器只是隐藏和显示但不执行令人敬畏的jQuery动画.

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

谁能说我为什么？我知道桌子上的动画不能正常工作,但在div上它应该没问题.

更新感谢所有答案.我缺少的信息是position绝对从DOM中删除元素.是的,我知道我应该把风格放在一个CSS - 这个版本只是为了快速测试,但谢谢你的答案!

Answer 1

.slideToggle()将元素的高度从0% - 100%设置为动画,隐藏其子项.

通过在整个小提琴中使用position:absolute,您将从DOM流中移除子元素,并干扰父元素逐步隐藏其子元素的能力.

如果将overflow设置为hidden,并从子项中删除position:absolute,则此方法可以正常工作.

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