jqueryslidetoggle跳转

我在一个网站上使用jqueryslidetoggle函数来显示关于某件事的“更多信息”。当我触发幻灯片时，内容会逐渐显示，但会向右移动大约100像素，直到动画结束时突然跳到正确的位置。另一方面，内容在开始“隐藏”动画之前向右跳跃相同的量，然后逐渐隐藏

发生在IE7/8、FF、Chrome上

有没有办法解决这个问题

---

提前感谢。

这只是一个无中生有的想法，但是如果函数根据需要操纵元素的高度css属性，则必须将填充和显示分开：css中没有填充以防止其跳跃

尝试搞乱元素的定位/显示/浮动方式。我也遇到过类似的问题，通过使用这些设置解决了这些问题。

我找到了一个解决办法，但我仍然不确定细节。当jQuery添加“overflow:hidden”样式时，附近的浮动元素的效果似乎发生了变化。解决方法是在slideToggle的div上放置一个永久的“overflow:hidden”，并留下一个负边距来抵消效果

---

我很惊讶更改溢出值会对布局产生如此大的影响，但您已经做到了…

您的文档是否包含任何DOCTYPE声明？如果没有它，一些浏览器会以“怪癖”模式呈现页面，这并不总是导致您期望的结果

看

为了确保页面按预期呈现，请在页面顶部（即html标记之前）添加以下声明

---

我遇到了相同的错误，通过使用

位置：相对；宽度：709px
固定宽度解决了这个问题。
我遇到了完全相同的问题，但仅当隐藏元素是
时。我在这个页面上尝试了所有方法，但唯一有效的方法是使用
overflow:hidden

但是使用
溢出的问题是：隐藏是指段落元素创建的上下间距突然被删除，从而使布局难看

我将隐藏元素从
更改为
，并删除了
溢出：隐藏。。。它在没有弄乱布局的情况下工作，跳跃问题也没有出现

编辑：

在一个新网站上，我决定使用一个隐藏的
，我发现了一些关于这个问题的东西

1） 当
div
包含
p
或
ul
或类似内容时，会发生跳跃

2） 当
div
仅包含文本时，
a
链接和/或图像，没有跳跃动画

3） 从隐藏的
div
中的元素中删除所有边距和填充可以清除问题。可以添加诸如换行符之类的其他内容来弥补填充和边距的不足。。。不理想，但动画再次平滑
 设置要滑动的组件的高度/宽度修复了使用类似（）的线条导致“跳跃”的错误：

这是一个老问题，但类似的问题仍然存在，下面是一个工作解决方案，还有一些要求

通过添加到切换的div解决：

overflow: hidden; position: relative; 

我对
.slideToggle
也有同样的问题，BenAdler是对的。将要切换的所有内容放入div中，并将div的样式设置为包含
溢出：隐藏
和
位置：相对
的内容。在那之后它会很好的工作
 我意外地认为，最容易使用的解决方案是将自定义函数添加到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');

我的示例动画不透明度切换tu，您可以根据需要对其进行修改。
您可以使用如下结构：

<div class="details">
    <div class="hidden"> [your toggled info] </div>
</div>

我想就是这样

您的jquery调用必须是：

$('.hidden').slideToggle("slow");

唯一对我有帮助的是：给内容一个滚动宽度。
也有同样的问题，发现了问题，可能是其他人有问题

如果您有min height->，那么您就有滑动切换的问题，只是为了分享一个适合我的解决方案

我正在为我正在工作的站点使用响应式布局，并且基本上在我的布局中的一个列上使用了slidetoggle，上面唯一有效的解决方案是为我的内容设置一个固定的宽度-但是由于列宽是动态的，这对我来说不是一个解决方案

将我想要切换的内容包装在一个额外的
中，然后在新的
div
上使用滑动切换似乎就可以了。尝试将
position:relative
添加到您尝试滑动切换的原始元素

是的，这确实添加了可怕的不必要的标记，但这是我让它工作的唯一方法。
我也有同样的问题，但溢出：隐藏和位置：相对没有效果。我在切换的元素的底部加了-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;

您使用的是哪个版本的jQuery核心？jQuery版本1.2.6。该网站是ASP.NET MVC，但这应该是无关的。Doctype为我在IE8上修复了它，谢谢。达到每日投票限制。抱歉。更具体地说，至少在我的情况下，最高保证金导致了问题。底部边距不受它的影响。我在@Stijn上做了一个错误报告，包括测试用例，我从来没有想过要尝试那个。。。但是我的
.details{
    position:relative;
}
.hidden{
    display:none;
}

$('.hidden').slideToggle("slow");

-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;