jQuery slideToggle跳转
我在网站上使用jQuery slideTogglefunction来显示有关某些内容的“更多信息”。 当我触发幻灯片时，内容会逐渐显示，但位于右侧约100个像素，直到动画结束时突然跳到正确的位置。 换句话说，内容在它开始“隐藏”动画之前向右跳跃相同的量，然后逐渐隐藏。
在IE7 / 8，FF，Chrome上发生。
关于如何解决这个问题的任何想法？
提前致谢。
我找到了一个解决方法，但我仍然不确定细节。 似乎当jQuery添加’overflow：hidden’样式时，附近浮动元素的效果发生了变化。 解决方法是在slideToggle’d div上放置一个永久的’overflow：hidden’，还有一个负余量 – 左边以抵消效果。
我很惊讶更改溢出值对布局有这样的影响，但是你有…
这只是在黑暗中拍摄，但如果该函数正在操纵元素的高度css属性，则根据此站点，您必须将填充和显示分开：在您的CSS中没有以防止它跳跃
通过添加到切换div解决：
overflow: hidden; position: relative; 您的文档是否包含任何DOCTYPE声明？ 没有它，一些浏览器以“quirck”模式呈现页面，这并不总是导致您期望的结果。
看到这里
要确保您的页面按预期呈现，请将以下声明添加到页面顶部（即在html标记之前）。
设置要滑动的组件的高度/宽度修复了使用像（ 参考 ）这样的行导致“跳跃”的错误：
$('#slider').css('height', $('#slider').height() + 'px');
我有这个完全相同的问题，但只有当隐藏的元素是
。 我尝试了这个页面上的所有内容，但唯一有用的是使用overflow:hidden; 。
但使用overflow:hidden;的问题overflow:hidden; 是段落元素创建的上下间距突然被删除，从而使布局难看。
我将隐藏的元素从
更改为
并删除了overflow:hidden; …它的工作没有弄乱布局，跳跃问题也没有回来。
编辑：
在一个新网站上，我决定使用一个隐藏的
，我发现了一些关于这个问题的事情……
1）当div包含p或ul或类似时，跳跃发生。
2）当div只包含文本，链接和/或图像时，没有跳跃动画。
3）从隐藏div的元素中删除所有边距和填充可以解决问题。 可以添加其他东西，如换行符，以弥补填充和边距的不足……不理想，但动画再次平滑。
我对.slideToggle有同样的问题，而BenAdler是对的。 将您想要的所有内容切换到div中，并将div的样式设置为包含overflow:hidden和position: relative 。 之后它会正常工作。
尝试搞乱元素的定位/显示/浮动方式。 我有类似的问题，通过玩这些设置解决了。
我遇到了同样的错误，通过使用position: relative; width: 709px;定位元素来解决它position: relative; width: 709px; position: relative; width: 709px; 固定宽度起到了作用。
你可以使用这样的结构：
[your toggled info]
在你的CSS
.details{ position:relative; } .hidden{ display:none; }
我认为就是这样。
你的jquery调用必须是：
$('.hidden').slideToggle("slow");
只是为了分享一个对我有用的解决方案。
我正在使用我正在处理的网站的响应式布局，并且在我的布局中的一个列上基本上使用了slidetoggle，上面唯一有效的解决方案是为我的内容设置固定宽度 – 但是由于列宽是动态的，这是对我来说不是解决方案。
包装内容我想在一个额外的
切换，然后在新div上使用幻灯片切换似乎可以解决问题。 尝试添加position:relative对于您尝试滑动切换的原始元素。
是的，这确实增加了可怕的不必要的标记，但这是我能让它工作的唯一方法。
这是一个旧问题，但仍然存在类似的问题，在具有更多要求的工作解决方案之下。
无论如何，我认为最容易使用的解决方案是将自定义函数添加到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');
我的示例动画不透明度切换tu，您可以根据需要进行修改。
唯一对我有帮助的是：让内容滚动宽度。
有同样的问题，发现一个问题也许别人有它。
如果你有min-height – >而不是slideToggle有问题
我有同样的问题，但溢出：隐藏和位置：相对无效。 我把margin-bottom：-10px放在正在切换的元素上，它解决了这个问题。
在切换的元素中使用浮动元素时，我遇到了这个问题。 对切换元素设置100％的宽度为我修复了这个问题。 如果您希望使用填充，那么您也可以将框大小设置为边框。
不需要相对定位，但您可能希望使用overflow：hidden来清除浮动元素。
添加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;