jQuery的的slideToggle只是显示和隐藏，但不正确动画(jQuery slideTogg

在这个例子中我的div容器只是隐藏和表演，但没有做的真棒jQuery的动画 。

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

任何人都可以说我为什么？ 我知道，表上的动画不能正常工作，但对div的它应该是没问题。

UPDATE感谢所有的答案。 我缺少的信息是绝对位置将删除DOM元素。 而且啊，我知道我应该把风格在CSS - 这个版本只是为了快速测试，但感谢的答案！

Answer 1:

.slideToggle（）动画从0％的元件的高度 - 100％，隐藏其子，因为它去。

通过使用位置：在您的小提琴绝对的，你是从DOM的流动去除子元素与父元素的增量隐藏其子项的能力干扰。

如果设置溢出隐藏，并删除位置：从孩子绝对的，这个工作正常。

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

Answer 2:

更新了您的FIDDLE - http://jsfiddle.net/7xzMa/14/ ---清洗的div，你应该把CSS成一个样式表使公司更容易编辑。 “显示”应设置为“无”。 除非你希望它是可见的，然后点击隐藏。 http://jsfiddle.net/7xzMa/8/

Answer 3:

阿图尔，我的建议是完全调整你的代码中，有太多的事情。 简短始终是最好的。 我想通过你的HTML摆脱“风格”属性的开始。 确保把样式CSS（这是更清洁和更容易维护 - 不是从多个标签删除样式好得多）。

我只是让你一个演示，希望它帮助！ 随意使用它！ 编码愉快！ http://jsfiddle.net/7xzMa/17/

Answer 4:

使用JQuery UI

$(document).ready(function() {
    $('.button').click(function() {
        $('.class1').toggle('slide',{direction: 'up'},500);
    });
});

文章来源: jQuery slideToggle just shows and hides but doesn't animate correctly