Jquery slideToggle效果不顺畅

时间:2014-04-04 19:45:03

标签: jquery slidetoggle

<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中的元素来说并不平滑。

5 个答案:

答案 0 :(得分:7)

如果某些事情看起来顺利,这个想法是一种观点,并且根据谁在看它而有所不同。如果你使用的是慢速,那么它的值是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
});

答案 1 :(得分:5)

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

答案 2 :(得分:4)

您需要为行添加宽度。

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

答案 3 :(得分:3)

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

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

答案 4 :(得分:0)

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