jQuery slideToggle只是显示和隐藏，但动画效果不正确。

Question

在这个例子中，我的div容器只是隐藏和显示，但没有进行令人惊叹的jQuery动画。

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

有人能告诉我为什么吗？我知道在表格上的动画效果不能正确地工作，但在 div 上应该是可以的。

更新 感谢所有的回答。我缺少的信息是绝对定位会将元素从 DOM 中移除。是的，我知道我应该把样式放在 CSS 中--这个版本只是为了快速测试，但还是谢谢你们的回答！

- Artur Stöber

---

出于兴趣，你的页面上是否有jQuery和jQuery UI？我发现如果也包括了jQuery UI，slideup/down不起作用。 - Chris

Answer 1

.slideToggle() 函数会将元素高度从0%渐变到100%，并在此过程中隐藏其子元素。

如果您在整个Fiddle中都使用position:absolute，那么您就会将子元素从DOM流中删除，并干扰父元素逐步隐藏其子元素的能力。

如果您将overflow设置为hidden，并从子元素中移除position:absolute，那么它就能正常工作。

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

- Wesley

---

嗯，这不太好，因为我需要这个布局 >.< 这意味着我需要找出如何在不使用绝对定位的情况下保持样式，并且它能正常工作，对吧？我只是用绝对定位是因为我对 CSS 不太擅长。好吧，我刚刚在左侧信息周围加了另一个 div，并使用了 float:left，现在它可以正常工作了。谢谢你的快速回复。 - Artur Stöber

这在我的情况下效果很好，因为我想要一个宽度为100%的全宽面板下拉，所以我只需使用$('.toggleButton').on("click", function () { $('#myHiddenDiv').slideToggle(700); }); - Trevor

Answer 2

使用JQuery UI。

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

- NotDragon

Answer 3

更新你的Fiddle - http://jsfiddle.net/7xzMa/14/ --- 清理了div，你应该将CSS放入样式表中，这样更容易编辑。 "display" 应该设置为 "none"。除非你想让它可见，然后点击隐藏。http://jsfiddle.net/7xzMa/8/

- alwayslearning

---

添加了缓动函数，使其打开更加平滑。祝好运！<br />http://jsfiddle.net/7xzMa/9/ - alwayslearning

你已经编写了所有的CSS，只需要添加一个class="divname"到你的CSS样式表中。.divname {然后添加你的所有样式} 为你更新了CSS，请问你的位置有什么问题？ http://jsfiddle.net/7xzMa/14/ - alwayslearning

你需要更好地构建你的 div。如果你的容器 div 是 100px，而你想要在其中放置两个 div，则不要使用绝对定位，告诉第一个 div 设置宽度为 40px，并让它向左浮动。然后设置下一个 div 的宽度为 60px，并让它向右浮动。如果你添加了 padding，请确保从总宽度中减去该数值。 - alwayslearning

Answer 4

Artur，我的建议是彻底重构你的代码，因为它包含了太多的内容。简短而简单总是最好的。我建议你首先删除HTML中的“style”属性。确保将样式放在CSS中（这样更清洁、更易于维护，比从多个标签中删除样式要好得多）。

我刚刚为你制作了一个演示，希望它能帮到你！请随意使用！祝你编码愉快！http://jsfiddle.net/7xzMa/17/

- Dom