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");隐藏的类searchDiv调用div上的display:none。在这4个div中，还有一些div元素与类row。元素如何放置在主div searchDiv中是否重要，因为我发现切换效果对于放置在主div中的元素来说并不平滑。

Answer 1

如果某些事情看起来顺利，这个想法是一种观点，并且根据谁在看它而有所不同。如果你使用的是慢速，那么它的值是200毫秒。

的slideToggle。 https://api.jquery.com/slideToggle/

持续时间以毫秒为单位;值越高表示动画越慢，而动画越快。字符串＆＃39;快速＆＃39;并且“慢”＆＃39;可以提供指示持续时间分别为200和600毫秒。

默认宽松是摆动，对我来说，它看起来很粗糙。我建议尝试使用线性缓和。

如果swing或linear对你来说不够平滑，你可以使用并包含jQuery UI并使用其他选项之一。您可以根据需要找到您认为合理的宽松 http://jqueryui.com/resources/demos/effect/easing.html

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

Answer 2

我知道这已经过时但是如果它对其他人有帮助，我在切换元素上设置了一个min-height属性时发现了一个问题，设置为固定高度为我解决了这个问题。

Answer 3

您需要为行添加宽度。

jQuery在显示之前不知道隐藏div的尺寸。因此，当它被点击时，实际上将其拉出位置以便在快速更换之前进行测量。这通常会产生引起一些跳跃的副作用。设置元素的宽度可以防止jQuery将其拉出位置。

Answer 4

我有类似的问题。有两件事情为我解决了。

我需要删除元素上的现有过渡css。
我的＃34;点击栏中有一个元素＆＃34; （h2）需要将边距设置为0.（它使其他元素动画到错误的边界 - 最后导致一个奇怪的快照）

Answer 5

如果您不喜欢定义固定高度，请随时在height: max-content;上使用.searchDiv技巧。因此，父元素覆盖了所有子元素，而不会引起任何overflow问题。

Jquery slideToggle效果不顺畅

5 个答案: