jQuery 基本的jQuery slideUp 和slideDown 让我抓狂！
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1092245/
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
Basic jQuery slideUp and slideDown driving me mad!
提问by Mizu
my jQuery skills are pretty good normally but this is driving me mad!
我的 jQuery 技能通常很好，但这让我发疯！
It's a fairly simple accordian I've coded up from scratch. Using jQuery 1.3.2 so there shouldn't be any jumping bugs but basically if you take a look at the example:
这是我从头开始编写的相当简单的手风琴。使用 jQuery 1.3.2 所以不应该有任何跳跃错误，但基本上如果你看一下这个例子：
http://www.mizudesign.com/jquery/accordian/basic.html
http://www.mizudesign.com/jquery/accordian/basic.html
I'm displaying the height for the target div on the right - if it contains text it thinks it's shorter than it is and jumping. If it's an image there's no problem.
我在右侧显示目标 div 的高度 - 如果它包含文本，它认为它比它短并跳跃。如果是图片就没有问题。
I can't figure out where I'm going wrong - it's obviously in the CSS somewhere but I've tried all the usual suspects like display:block
我不知道我哪里出错了——它显然在 CSS 中的某个地方，但我已经尝试了所有常见的嫌疑人，比如 display:block
Any ideas would be gratefully received!
任何想法将不胜感激！
Yours, Chris
你的，克里斯
PS Please forgive the nature of the source code, I've ripped it out the whole project I'm working on so it does include some divs that don't really need to be there.
PS 请原谅源代码的性质，我已经把它撕掉了我正在处理的整个项目，所以它确实包含了一些并不真正需要存在的 div。
回答by Mizu
I must admit I've found my own dynamic solution now.
我必须承认我现在找到了自己的动态解决方案。
http://www.mizudesign.com/jquery/accordian/basic.htmlshould be fixed.
http://www.mizudesign.com/jquery/accordian/basic.html应该是固定的。
It's very simple really - just adds the height using .css before hiding the div. Works a treat :)
这真的非常简单 - 只需在隐藏 div 之前使用 .css 添加高度。很好用 :)
$("#PlayerButtonsContent div").each (function() {
$(this).css("height", $(this).height());
});
$("#PlayerButtonsContent div").hide();
回答by redsquare
You need a width or height on the content for it to animate smoothly.
您需要内容的宽度或高度才能流畅地设置动画。
回答by adardesign
I think the problem is, that when padding or margin is added then it jumps, this was the case by me. you have to animate the margin in the callback
我认为问题是，当添加填充或边距时，它会跳转，我就是这种情况。您必须在回调中为边距设置动画
Also "keep in mind" that tables behave buggy with slideDown slideUp and rather use fadeIn fadeOut
还要“记住”表格在使用 slideDown slideUp 时会出现问题，而应使用淡入淡出淡出
回答by Sampson
Get the height once the div has finished its animation from the callback. It's possible that you're getting the height while the div is being animated, and you're getting a transitional value.
从回调中获取 div 完成动画后的高度。有可能在 div 动画时获得高度，并且获得过渡值。
If your animation is jumpy, try using the callbacks. Don't open a div and hide a div at the same time. Instead, hide your first div, and within the callback show your next div.
如果您的动画很跳跃，请尝试使用回调。不要同时打开一个 div 并隐藏一个 div。相反，隐藏您的第一个 div，并在回调中显示您的下一个 div。
$(".someDiv").slideUp("normal", function(){
/* This animation won't start until the first
has finished */
$(".someOtherDiv").slideDown();
});
Updated (From the comments):
更新（来自评论）：
redsquare: http://jqueryfordesigners.com/slidedown-animation-jump-revisited/
红方：http: //jqueryfordesigners.com/slidedown-animation-jump-revisited/
回答by beaves
I also had an annoying slideUp()jump issue that occurred on Safari, but not chrome or IE. It turned out that the div tag I was hiding/showing was right below another div tag that contained float:leftdivs. During sliding up, the floating divs would be momentarily re-rendered causing the jump.
我也有一个恼人的slideUp()跳转问题，它发生在 Safari 上，但不是 chrome 或 IE。事实证明，我隐藏/显示的 div 标签就在另一个包含float:leftdiv 的div 标签下方。在向上滑动期间，浮动的 div 会暂时重新渲染，从而导致跳跃。
The fix was simply adding clear:bothto the style of the hiding/showing div.
修复只是添加clear:both到隐藏/显示 div 的样式。
回答by Blake Plumb
My problem is that since I have a responsive designI don't know what the width or height of my element is going to be. After reading this blog post http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htmI realized that jQuery was changing the position of my element to fixed and messing with the layout of the element. I added the following to my CSS for the element and didn't notice any bad side effects in IE7+, firefox, chrome and safari.
我的问题是，由于我有一个响应式设计，我不知道元素的宽度或高度是多少。阅读这篇博文http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm 后，我意识到 jQuery 正在改变位置我的元素固定并弄乱了元素的布局。我将以下内容添加到我的 CSS 元素中，并没有注意到 IE7+、firefox、chrome 和 safari 中的任何不良副作用。
display: none;
overflow: hidden;
position: relative !important;
回答by 3rik82
Replacing margin-top and margin-bottom values with padding-top and padding-bottom values did the trick for me. Don't forget to set the margin value to 0 after this.
用 padding-top 和 padding-bottom 值替换 margin-top 和 margin-bottom 值对我来说是诀窍。在此之后不要忘记将边距值设置为 0。
回答by Fred K
For me, the problem was the margin (or padding) on the div to show/hide with slide, but I needed to give margin (or padding) to that div. I solved with this trick:
对我来说，问题是 div 上的边距（或填充）以显示/隐藏幻灯片，但我需要为该 div 提供边距（或填充）。我用这个技巧解决了：
.slide-div:before{
content: " ";
display: block;
margin-top: 15px;
}
回答by sciroccohsd
The issue is due to IE (quirks mode) trying to render "height:0px".
问题是由于 IE（怪癖模式）试图呈现“height:0px”。
The fix: Animate height to 1 (not 0), then hide and reset height:
修复：将高度动画设置为 1（不是 0），然后隐藏并重置高度：
// slideUp for all browsers
$("div").animate({ height:1 },{ complete:function(){
// hide last pixel and reset height
$(this).hide().css({ height:"" });
}
});
回答by Smirnoff
This worked for me:
这对我有用：
$(this).pathtoslidingelementhere.width($(this).parent().width());
