jQuery slideToggle 高度是“跳跃”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2327952/
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
slideToggle height is "jumping"
提问by Johannes
My jQuery slideToggle()experiment
我的 jQueryslideToggle()实验
Can anybody tell me why my boxes "jump" when i open them? The first half they slide, the rest they "jump"??
谁能告诉我为什么我的盒子在打开时会“跳动”？上半场他们滑动，其余的他们“跳”？
Thanks,Johannes
谢谢，约翰内斯
回答by Doug Neiner
Its a simple fix. Add this CSS rule to your stylesheet (Tested in Firebug to work, and from my past experience with this problem, this is the fix):
这是一个简单的修复。将此 CSS 规则添加到您的样式表（在 Firebug 中测试可以工作，根据我过去对这个问题的经验，这是修复）：
ol.message_list { position: relative }
It is a CSS bug, not a jQuery bug per se.
这是一个 CSS 错误，而不是 jQuery 错误本身。
回答by Youngcut
What's helping for me is
对我有帮助的是
overflow: hidden
to the that toggle...
到那个切换...
回答by Nick Craver
The quickest fix in your case:
在您的情况下最快的解决方法：
.message_container { width: 361px; }
I'm not sure exactly why, but not giving the container a fixed width when containing a <p>causes issues, give it one and the jumpyness goes away.
我不确定确切的原因，但是当包含一个<p>原因问题时没有给容器一个固定的宽度，给它一个并且神经质消失。
回答by Bloggerschmidt
css padding and jquery slideToggle doesn't work well together. Try to box out padding.
css padding 和 jquery slideToggle 不能很好地协同工作。尝试框出填充。
回答by Seb
I found this problem in many occasions in which I was animating just the height with slideTogglebut not the margin/padding.
我在很多情况下都发现了这个问题，其中我只对高度进行动画处理，slideToggle而不是边距/填充。
So, something like this might solve it:
所以，像这样的事情可能会解决它：
$("#thediv").slideToggle().animate({"margin-bottom": "toggle"});
回答by kursus
If set, the min-heightproperty can also trigger such a glitch. In this case you need to reset it :
如果设置，该min-height属性也可以触发这样的故障。在这种情况下，您需要重置它：
.toggle-container {
position: relative;
min-height: 0;
}
回答by Ben Crook
I find the easiest fix is usually to remove the padding from the element that slides, and add padding to an element insidethe sliding element.
我发现最简单的解决方法通常是从滑动的元素中移除内边距，并在滑动元素内的元素上添加内边距。
In this example the div with the attribute of data-role="content"is the one that slides, and the padding is applied to tab-example__content
在这个例子中，属性为 的 divdata-role="content"是滑动的那个，填充应用于tab-example__content
<div data-role="content" class="tab-example__content">
...
</div>
To fix the 'jerky' sliding I added a new div inside the sliding element and moved the class/padding to that, like so:
为了修复“生涩”滑动，我在滑动元素内添加了一个新的 div 并将类/填充移动到那个位置，如下所示：
<div data-role="content">
<div class="tab-example__content">
...
</div>
</div>
It's now nice and smooth
现在很好很流畅
回答by Adarchy
Accidentally I think that the easiest to use solution is to add custom function to jQuery with animate padding/margin-top/bottom too.
偶然地，我认为最容易使用的解决方案是使用动画填充/边距顶部/底部向 jQuery 添加自定义函数。
//this function is to avoid slideToggle jQuery jump bug.
$.fn.slideShow = function(time,easing) { return $(this).animate({height:'show','margin-top':'show','margin-bottom':'show','padding-top':'show','padding-bottom':'show',opacity:1},time,easing); }
$.fn.slideHide = function(time,easing) {return $(this).animate({height:'hide','margin-top':'hide','margin-bottom':'hide','padding-top':'hide','padding-bottom':'hide',opacity:0},time,easing); }
And useage example:
和用法示例：
$(this).slideShow(320,'easeOutQuart');
$(this).slideHide(320,'easeOutQuart');
My example animated opacity toggle tu, you can modify it as you need.
我的示例动画不透明度切换图，您可以根据需要修改它。
回答by quemeful
I have found yet another thing that affects it. Removing min-heightfrom the CSS of that element fixed it for me.
我发现了另一件影响它的事情。min-height从该元素的 CSS 中删除为我修复了它。
回答by Ivan Skoropadsky
if the toggled box hasn't height by default, you need to add it, for auto height add this:
如果默认情况下切换框没有高度，则需要添加它，对于自动高度添加：
.toggle-container {
height: auto;
}
