Jquery slideToggle 效果不流畅
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22871779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery slideToggle effect not smooth
提问by user2585299
<div class="searchDiv">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
I am trying to call $("div.searchDiv").slideToggle("slow");on div with class searchDivwhich is hidden initially using display:none. There are again some div elements inside those 4 div's with class row. Does it matter how the elements are placed inside the main div searchDivbecause I see that the the toggle effect is not smooth for the elements placed inside the main div.
我正在尝试使用最初使用隐藏的$("div.searchDiv").slideToggle("slow");类调用div 。在这 4 个带有 class 的 div 中又有一些 div 元素。元素如何放置在主 div 内是否重要，因为我发现对于放置在主 div 内的元素，切换效果不平滑。searchDivdisplay:nonerowsearchDiv
回答by donlaur
The idea if something looks smooth or not is an opinion and different based on who is looking at it. If you are using slow it is a given it a value of 200 milliseconds.
某些东西是否看起来光滑的想法是一种意见，并且根据谁在看它而有所不同。如果您使用的是慢速，则给定它的值为 200 毫秒。
SlideToggle. https://api.jquery.com/slideToggle/
滑动切换。 https://api.jquery.com/slideToggle/
Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.
持续时间以毫秒为单位；较高的值表示较慢的动画，而不是较快的动画。可以提供字符串 'fast' 和 'slow' 分别表示 200 和 600 毫秒的持续时间。
The default easing is swing and to me, it looks rough. I would suggest trying linear for the easing.
默认的缓动是摆动，对我来说，它看起来很粗糙。我建议尝试线性进行缓和。
If the swing or linear isn't smooth enough for you, you can use and include jQuery UI and use one of the other options.
You can find the easing that you think works as smooth as you need.
http://jqueryui.com/resources/demos/effect/easing.html
如果摆动或线性对您来说不够平滑，您可以使用并包含 jQuery UI 并使用其他选项之一。您可以根据需要找到您认为可以顺利运行的缓动。
http://jqueryui.com/resources/demos/effect/easing.html
$('.searchDiv').slideToggle(2000,"linear", function () {
// actions to do when animation finish
});
回答by TJ15
I know this is old but in case it helps anyone else, I found an issue when i set a min-height property on the toggled element, setting to a fixed height resolved this for me.
我知道这是旧的，但如果它对其他人有帮助，当我在切换元素上设置 min-height 属性时，我发现了一个问题，设置为固定高度为我解决了这个问题。
回答by Tomer Almog
You need to add Width to your rows.
您需要将 Width 添加到您的行中。
jQuery doesn't know the dimensions of your hidden div until it's displayed. So when it's clicked on it actually pulls it out of position to measure it before quickly replacing it. This often has the side effect of causing some jumpiness. Setting the width on the element prevents jQuery from pulling it out of position.
jQuery 不知道隐藏 div 的尺寸，直到它显示出来。因此，当它被点击时，它实际上会在快速更换之前将其拉出位置以进行测量。这通常具有引起一些跳跃的副作用。在元素上设置宽度可防止 jQuery 将其拉出位置。
回答by Ivan Town
I had a similar problem. Two things fixed it for me.
我有一个类似的问题。两件事为我修复了它。
- I needed to remove existing transition css on my element.
- I had an element inside my "clicking bar" (h2) that needed margin set to 0. (it was making other elements animate to the wrong boundary - causing a strange snap at the end)
- 我需要删除元素上现有的过渡 css。
- 我的“点击栏”（h2）中有一个元素需要将边距设置为 0。（它使其他元素动画到错误的边界 - 最后导致奇怪的捕捉）
