我在网站上使用 jQuery slideToggle 函数来显示有关某事的“更多信息”。当我触发幻灯片时，内容逐渐显示出来，但位于右侧约 100 像素，直到动画结束时突然跳转到正确的位置。反之亦然，内容在开始“隐藏”动画之前向右跳跃相同的量，然后逐渐隐藏。
在 IE7/8、FF、Chrome 上发生。
关于如何解决此问题的任何想法？
提前致谢。
【问题讨论】：
标签： jquery
我找到了解决方法，但我仍然不确定细节。似乎当jQuery添加'overflow：hidden'样式时，附近浮动元素的效果发生了变化。解决方法是在 slideToggle 的 div 上放置一个永久的“溢出：隐藏”，以及一个负边距来平衡效果。
我很惊讶改变溢出值对布局有这样的影响，但是你有它......
【讨论】：
这只是在黑暗中拍摄，但如果函数正在操纵元素的高度 css 属性，根据this site，您必须在 css 中分离填充和 display:none 以保留它从跳跃
【讨论】：
通过添加到切换的div来解决：
overflow: hidden; position: relative;
【讨论】：
您的文档是否包含任何 DOCTYPE 声明？没有它，某些浏览器会以“quirck”模式呈现页面，这并不总是会导致您期望的结果..
见here
为确保您的页面按预期呈现，请将以下声明添加到页面顶部（即 html 标记之前）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
【讨论】：
设置您要滑动的组件的高度/宽度可修复使用 (reference) 之类的行导致“跳跃”的错误：
$('#slider').css('height', $('#slider').height() + 'px');
【讨论】：
我遇到了同样的问题，但只有当隐藏元素是 <div> 时。我尝试了此页面上的所有内容，但唯一有效的是使用overflow:hidden;。
但是使用overflow:hidden; 的问题是段落元素创建的上下间距突然被删除，从而使布局变得丑陋。
我将隐藏元素从<div> 更改为<p> 并删除了overflow:hidden;...它在没有弄乱布局的情况下工作，并且跳跃问题没有返回。
编辑：
在一个新网站上，我决定使用隐藏的<div>，我发现了一些关于这个问题的事情......
1) 当div 包含p 或ul 或类似时，会发生跳转。
2) 当div 只包含文字、a 链接和/或图片时，没有跳跃动画。
3) 从隐藏的div 中的元素中删除所有边距和填充可以解决问题。可以添加换行符之类的其他内容来弥补填充和边距的不足……虽然不理想，但动画再次变得流畅。
【讨论】：
<p> 和 <ul> 已经有 0 上边距。我想知道如果div 包含多个段落，那么div 的中间有底部边距会发生什么情况。感谢您的报告。
.slideToggle 我也遇到了同样的问题，BenAdler 是对的。将您想要切换的所有内容放在一个 div 中，并将 div 的样式设置为包含 overflow:hidden 和 position: relative 的内容。之后它会正常工作。
【讨论】：
尝试弄乱元素的定位/显示/浮动方式。我遇到过类似的问题，通过使用这些设置解决了。
【讨论】：
我遇到了同样的错误，通过定位元素解决了它
position: relative; width: 709px;
固定宽度可以解决问题。
【讨论】：
你可以使用这样的结构：
<div class="details">
<div class="hidden"> [your toggled info] </div>
</div>
在你的 CSS 中
.details{
position:relative;
}
.hidden{
display:none;
}
我想就是这样。
您的 jquery 调用必须是：
$('.hidden').slideToggle("slow");
【讨论】：
只是为了分享一个对我有用的解决方案。
我正在为我正在处理的网站使用响应式布局，并且基本上在我的布局中的一个列上使用滑动切换，上面唯一有效的解决方案是为我的内容设置固定宽度 - 但是列宽是动态这不是我的解决方案。
将我想要切换的内容包裹在一个额外的<div> 中，然后在新的div 上使用滑动切换似乎可以解决问题。尝试将position:relative 添加到您尝试滑动切换的原始元素。
是的，这确实添加了可怕的不必要的标记，但这是我让它工作的唯一方法。
【讨论】：
添加 CSS3 过渡/转换属性总是可以解决我使用 slideToggle 的任何跳跃问题...示例：
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
-webkit-transition: transform 0.26s ease;
-moz-transition: transform 0.26s ease;
-ms-transition: transform 0.26s ease;
-o-transition: transform 0.26s ease;
transition: transform 0.26s ease;
transition: -webkit-transform 0.26s ease;
【讨论】：
这是一个老问题，但类似的问题仍然存在，低于具有更多要求的工作解决方案。
【讨论】：
我意外地认为最容易使用的解决方案是将自定义函数添加到带有动画填充/边距顶部/底部的 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); }
以及用法示例：
$(this).slideShow(320,'easeOutQuart');
$(this).slideHide(320,'easeOutQuart');
我的示例动画不透明度切换图，您可以根据需要进行修改。
【讨论】：
唯一对我有帮助的事情是：给内容滚动一个宽度。
【讨论】：
遇到了同样的问题，发现问题可能是别人有的。
如果你有 min-height -> 那么你有 slideToggle 的问题
【讨论】：
我遇到了同样的问题，但是 overflow:hidden 和 position: relative 没有效果。我把 margin-bottom: -10px 放在切换的元素上，它解决了这个问题。
【讨论】：
我在切换的元素中使用浮动元素时遇到了这个问题。针对切换元素设置 100% 的宽度为我解决了这个问题。如果你想使用填充，那么你也可以将 box-sizing 设置为 border-box。
相对定位不是必需的，但您可能希望使用溢出：隐藏来清除浮动元素。
【讨论】：