Jquery slideToggle效果不流畅

Posted 2023-02-25

【中文标题】Jquery slideToggle效果不流畅

【英文标题】：Jquery slideToggle effect not smooth

【发布时间】：2014-04-04 19:45:02

【问题描述】：

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

我正在尝试使用 searchDiv 类在 div 上调用 $("div.searchDiv").slideToggle("slow");，该类最初使用 display:none 隐藏。在这 4 个 div 中还有一些 div 元素，类为row。元素如何放置在主 div 中是否重要searchDiv，因为我发现切换效果对于放置在主 div 中的元素来说并不平滑。

【问题讨论】：

你能发布一个完整的代码示例吗？并尽可能包含一个 jsFiddle.net 示例。

【参考方案1】：

某件东西看起来是否流畅的想法是一种观点，并且取决于谁在看它。如果您使用慢速，则它的值为 200 毫秒。

滑动切换。 https://api.jquery.com/slideToggle/

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

默认的缓动是摇摆，对我来说，它看起来很粗糙。我建议尝试线性缓动。

如果摆动或线性对您来说不够平滑，您可以使用并包含 jQuery UI 并使用其他选项之一。 您可以根据需要找到您认为流畅的缓动。http://jqueryui.com/resources/demos/effect/easing.html

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

【讨论】：

放置在分区内的子元素具有 class="row" 具有左边距属性并且绝对定位。我将它们的位置更改为相对，现在切换效果很平滑。虽然智利元素的 css 不应该影响切换行为。

【参考方案2】：

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

【讨论】：

这救了我 :) 非常感谢

【参考方案3】：

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

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

【讨论】：

删除 CSS 过渡为我修复了它！谢谢。

【参考方案4】：

您需要为行添加宽度。

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

【参考方案5】：

如果您不习惯定义固定高度，请随意使用height: max-content; 技巧.searchDiv。因此父元素覆盖了所有子元素而不会导致任何overflow 问题。