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

Answer 1

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

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

持续时间以毫秒为单位; 值越高表示动画越慢,而动画越快.可以提供字符串'fast'和'slow'以分别指示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

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

1. 我需要删除元素上现有的过渡 CSS。
2. 我的“点击栏”(h2) 中有一个元素需要将边距设置为 0。（它使其他元素动画到错误的边界 - 导致最后出现奇怪的捕捉）

Answer 3

我知道这是旧的,但万一它帮助其他人,我发现一个问题,当我在切换元素上设置一个min-height属性,设置为固定高度为我解决了这个问题.