Jquery的slideToggle效果不流畅

Question

<div class="searchDiv">
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
</div>

我正在尝试调用$("div.searchDiv").slideToggle("slow"); 来控制初始时使用display:none 隐藏的 class 为 searchDiv 的 div。在这4个 div 中又有一些 class 为 row 的子元素。是否影响这些元素在主 div 中的位置，因为我发现放在主 div 中的元素切换效果不流畅。

- user2585299

---

你能发布一个完整的代码示例吗？如果可能的话，请包含一个 jsFiddle.net 的示例。 - j08691

Answer 1

对于一个东西是否看起来平滑，这取决于不同的人的看法和观点。如果你使用 slow，它的值是200毫秒。

SlideToggle. https://api.jquery.com/slideToggle/

持续时间以毫秒为单位；较高的值表示动画速度较慢，而不是较快。可以提供字符串“fast”和“slow”，分别表示持续时间为200和600毫秒。

默认缓动效果是swing，但在我看来，这个效果很粗糙。建议尝试缓动效果为 linear。

如果 swing 或 linear 不够平滑，您可以使用并包含 jQuery UI 并使用其他选项之一。您可以找到您认为足够平滑的缓动效果。
http://jqueryui.com/resources/demos/effect/easing.html

$('.searchDiv').slideToggle(2000,"linear", function () {
    // actions to do when animation finish
});

- donlaur

---

放置在类名为“row”的div中的子元素具有margin-left属性并被绝对定位。我将它们的定位更改为相对定位，现在切换效果很流畅。尽管子元素的CSS不应影响切换行为。 - user2585299

Answer 2

我知道这篇文章比较老，但如果有人需要的话，我发现一个问题。当我在切换元素上设置了最小高度属性时，将其设置为固定高度对我很有帮助。

- TJ15

---

那救了我一命 :) 非常感谢 - Wolfack

对我来说，它是 height 属性。 - NKP

Answer 3

我曾经遇到过类似的问题，有两个方法可以解决它。

1. 我需要删除元素上现有的过渡CSS。
2. 我的“点击栏”（h2）中有一个元素，需要将其边距设置为0。（它会使其他元素动画到错误的边界 - 导致奇怪的突然停止）

- Ivan Town

---

移除CSS过渡效果解决了我的问题！谢谢。 - CMG

一样的。删除现有的过渡效果完美地解决了问题。 - undefined

Answer 4

您需要为您的行添加宽度。

jQuery在隐藏的div未显示时无法知道其尺寸。因此，在单击它之前，实际上会将其移出位置以进行测量，然后迅速替换它。这通常会产生一些抖动效果。在元素上设置宽度可以防止jQuery将其移出位置。

- Tomer Almog

Answer 5

如果您不熟悉定义固定高度的方法，可以在.searchDiv上使用height: max-content;技巧。这样父元素就可以覆盖所有子元素，而不会引起任何overflow问题。

- zonay