我在网站上使用jQuery slideToggle功能来显示有关某些内容的“更多信息”。当我触发幻灯片时，内容会逐渐显示，但位于右侧约100个像素，直到动画结束时突然跳到正确的位置。换句话说，内容在开始“隐藏”动画之前会向右跳跃相同数量，然后逐渐隐藏。
在IE7 / 8，FF，Chrome上发生。
关于如何解决此问题的任何想法？
提前致谢。
答案 0 :(得分：34)
我找到了解决方法，但我仍然不确定细节。似乎当jQuery添加'overflow：hidden'样式时，附近浮动元素的效果发生了变化。解决方法是在slideToggle'd div上放置一个永久的'overflow：hidden'，还有一个负边距，以抵消效果。
我很惊讶更改溢出值对布局有这样的影响，但是你有它......
答案 1 :(得分：7)
这只是在黑暗中拍摄，但如果函数正在操纵元素的高度css属性，则根据this site，你必须将填充和显示分开：你的css中没有防止它跳跃
答案 2 :(得分：5)
通过添加到切换的div来解决：
overflow: hidden; position: relative;
答案 3 :(得分：3)
您的文件是否包含任何DOCTYPE声明？没有它，某些浏览器会以“quirck”模式呈现页面，这并不总是会产生您期望的结果。
请参阅here
要确保您的页面按预期呈现，请将以下声明添加到页面顶部（即在html标记之前）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
答案 4 :(得分：3)
设置要滑动的组件的高度/宽度修复了使用像（reference）这样的行导致“跳跃”的错误：
$('#slider').css('height', $('#slider').height() + 'px');
答案 5 :(得分：2)
我遇到了同样的问题，但只有当隐藏的元素是<div>时才有。我尝试了此页面上的所有内容，但唯一有效的方法是使用overflow:hidden;。
但是使用overflow:hidden;的问题在于上层和下面的问题。段落元素创建的较小间距突然被删除，从而使布局变得丑陋。
我将隐藏的元素从<div>更改为<p>并删除了overflow:hidden; ...它的工作没有弄乱布局，并且跳转问题没有返回。
修改
在新网站上，我决定使用隐藏的<div>，我发现了一些有关此问题的内容......
1）当div包含p或ul或类似内容时，会发生跳跃。
2）当div仅包含文字，a链接和/或图片时，不会跳转动画。
3）删除所有边距＆amp;隐藏div中的元素填充可以解决问题。可以添加其他东西，如换行符，以弥补填充和缺乏边距...不理想，但动画再次平滑。
答案 6 :(得分：2)
我在.slideToggle遇到了同样的问题，而BenAdler是对的。将您想要的所有内容切换为div，并将div的样式设置为包含overflow:hidden和position: relative的内容。之后它会正常工作。
答案 7 :(得分：1)
尝试弄乱元素的定位/显示/浮动方式。我有类似的问题，通过玩这些设置解决了。
答案 8 :(得分：1)
只是为了分享一个对我有用的解决方案。
我正在使用我正在处理的网站的响应式布局，并且在我的布局中的一个列上实际使用了slidetoggle，上面唯一的解决方案是为我的内容设置固定宽度 - 但是因为列宽是动态这对我来说不是一个解决方案。
包含我想要在额外<div>中切换的内容，然后在新div上使用幻灯片切换似乎可以解决问题。尝试将position:relative添加到您尝试滑动的原始元素。
是的，这确实增加了可怕的不必要的标记，但这是我能让它工作的唯一方法。
答案 9 :(得分：1)
你可以使用像这样的结构：
<div class="details">
<div class="hidden"> [your toggled info] </div>
</div>
和你的css
.details{
position:relative;
}
.hidden{
display:none;
}
我认为就是这样。
你的jquery电话必须是：
$('.hidden').slideToggle("slow");
答案 10 :(得分：1)
我遇到了同样的错误，通过定位元素来解决它
position: relative; width: 709px;
固定宽度起到了作用。
答案 11 :(得分：0)
我认为最容易使用的解决方案是将自定义函数添加到jQuery，并使用动画填充/ margin-top / bottom。
//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');
我的示例动画不透明切换图片，您可以根据需要进行修改。
答案 12 :(得分：0)
这是一个旧问题，但仍然存在类似的问题，在一个有更多要求的工作解决方案之下。
答案 13 :(得分：0)
唯一对我有帮助的是：让内容滚动宽度。
答案 14 :(得分：0)
遇到了同样的问题，发现了一个问题，也许其他人也有问题。
如果你有最小高度 - >比你有一个slideToggle的问题
答案 15 :(得分：0)
我有同样的问题，但溢出：隐藏和位置：相对无效。我把margin-bottom：-10px放在正在切换的元素上，它解决了这个问题。
答案 16 :(得分：0)
在切换的元素中使用浮动元素时遇到此问题。对切换元素设置100％的宽度为我修复了这个问题。如果你想使用填充，那么你也可以将box-sizing设置为border-box。
不需要相对定位，但您可能希望使用overflow：hidden来清除浮动元素。
答案 17 :(得分：0)
使用slideToggle添加CSS3转换/转换属性总能解决任何跳跃问题...示例：
-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;