我在网站上使用 jQuery 的 slideToggle 函数来显示某些内容的“更多信息”。 当触发滑动时，内容逐渐显示，但到动画结束时，它位于右侧约100像素处，然后突然跳到正确位置。 在另一方面，内容在开始“隐藏”动画之前向右跳了同样的数量，然后逐渐隐藏。
在 IE7 / 8、FF 和 Chrome 上都会出现此问题。
有什么想法可以解决这个问题吗？
提前感谢。
在 IE7 / 8、FF 和 Chrome 上都会出现此问题。
有什么想法可以解决这个问题吗？
提前感谢。
jQuery slideToggle 跳动问题
11
- Darren Oster
2
你使用的是哪个版本的jQuery核心？ - Adam Bellaire
jQuery 版本 1.2.6。该网站是 ASP.NET MVC，但这应该无关紧要。 - Darren Oster
18个回答
35
我已经找到了一个解决方法，但我仍然不确定细节。似乎当jQuery添加'overflow: hidden'样式时，附近的浮动元素的效果发生了改变。解决方法是在slideToggle的div上放置一个永久的'overflow: hidden'，并且还有一个负的margin-left来抵消这个影响。
我很惊讶改变overflow值会对布局产生如此大的影响，但事实就是这样...
- Darren Oster
1
除此之外，我还发现在您尝试切换的元素上应用的任何CSS过渡都会影响它。我在所有东西上都有一个通用的“全部”过渡，一旦我将其删除，问题就解决了。需要注意这一点！ - Michael Giovanni Pumo
5
通过添加到切换的div中解决：
overflow: hidden; position: relative;
- Ben
1
非常感谢，这解决了我的问题！但我很好奇，为什么它有效？ - An intern has no name
3
设置您想要滑动的组件的高度/宽度可以修复使用类似于以下行的代码时导致的“跳跃”错误（参考链接）：
$('#slider').css('height', $('#slider').height() + 'px');
- DanielBlazquez
1
我曾经遇到过在 div 中放置表格导致跳动的情况。这个解决方案结合将内部表格高度设置为 height:100% 可以解决问题。 - JimP
3
您的文档中是否包含任何DOCTYPE声明？如果没有，一些浏览器将以“quirck”模式呈现页面，这并不总是会得到您期望的结果。
请参见此处
为确保您的页面按预期呈现，请在页面顶部（即html标记之前）添加以下声明。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- matdumsa
1
1Doctype 对于我的 IE8 问题进行了修复，谢谢。每日投票限制已达到。抱歉。 - Andrew
2
我曾经遇到过和这个问题一模一样的情况，但是只有当隐藏元素是一个
但是使用
我将我的隐藏元素从
编辑：
在一个新网站上，我决定使用一个隐藏的
1）当
2）当
3）从隐藏的
<div> 的情况下才会出现。我尝试了这个页面上的所有方法，但唯一有效的方法是使用 overflow:hidden;。但是使用
overflow:hidden; 的问题在于，段落元素创建的上部和下部的空间突然消失，从而使布局变得丑陋。我将我的隐藏元素从
<div> 更改为 <p> 并删除了 overflow:hidden; ... 它可以正常工作，不会破坏布局，并且跳跃问题也不会再次发生。编辑：
在一个新网站上，我决定使用一个隐藏的
<div>，并发现了一些关于这个问题的东西...1）当
div 包含 p 或 ul 或类似的内容时，就会出现跳跃的问题。2）当
div 只包含文本、a 链接和/或图片时，没有跳跃动画。3）从隐藏的
div 中删除所有元素的边距和内边距可以解决此问题。其他像换行一样的东西可以添加来弥补缺少内边距和边距的影响...虽然不是很理想，但动画又变得平滑了。- Sparky
3
1更具体地说，至少在我的情况下，顶部边距会导致问题。底部边距不受影响。 - user247702
我已经在http://bugs.jquery.com/ticket/10662上提交了一个包括测试用例的错误报告。 - user247702
@Stijn，我从来没有想过尝试那个...但是我的
<p>和<ul>已经有了0的上边距。如果div包含多个段落，所以在div中间有底部边距会发生什么呢？感谢您的报告。 - Sparky2
我遇到了与 .slideToggle 相同的问题，而BenAdler是正确的。把你想要切换的所有内容放在一个div中，并将该div的样式设置为包含overflow:hidden和position:relative的内容。之后它就会正常工作。
- MJohnson
1
在使用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;
- Steven Brand
1
我遇到了同样的错误，通过使用以下代码定位元素解决了问题：
position: relative; width: 709px;
固定宽度解决了问题。
- Jörn Meyer
1
我想分享一个对我有效的解决方案。
我正在为一个站点使用响应式布局，基本上在我的布局中使用slidetoggle在其中一个列上，唯一有效的解决方案是为我的内容设置固定宽度 - 但是由于列宽是动态的，这对我来说不是解决方案。
将我想要切换的内容包装在一个额外的<div>中，然后在新的div上使用滑动切换似乎就可以解决问题。尝试将position:relative添加到您尝试滑动切换的原始元素中。
是的，这确实增加了可怕的不必要的标记，但这是我能让它起作用的唯一方法。
- rmorse
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接