我在网站上使用 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个回答
1
尝试调整元素的定位/显示/浮动方式。我曾经遇到过类似的问题，通过调整这些设置解决了问题。
- Ben Crouse
1
您可以使用类似这样的结构：
<div class="details">
<div class="hidden"> [your toggled info] </div>
</div>
并且在你的CSS中
.details{
position:relative;
}
.hidden{
display:none;
}
我想就这样了。
你的jQuery调用必须是：
$('.hidden').slideToggle("slow");
- Francisco Javier Arenas Ulloa
0
我不小心认为最容易使用的解决方案是使用自定义函数将动画填充/上边距/下边距添加到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');
这是一个关于编程的例子，它可以实现动态透明度切换。你可以根据需要进行修改。
- Adarchy
0
我曾经遇到过同样的问题，但是overflow:hidden和position:relative没有任何效果。我在切换元素中加入了margin-bottom: -10px，问题得到了解决。
- Sauce
0
我曾经遇到过同样的问题，后来发现可能是其他人也遇到了这个问题。
如果你设置了最小高度（min-height），那么在使用slideToggle时就会出现问题。
- IdanHen
0
唯一对我有用的方法是为滚动内容指定一个宽度。
- Bernbacher
1
1这是一个打字错误吗？你的意思是“给内容滚动一个宽度”吗？ - Jean-François Côté
0
当我在被切换的元素内使用浮动元素时，遇到了这个问题。将切换的元素设置为100％的宽度可以解决此问题。如果您希望使用填充，则还可以将box-sizing设置为border-box。
相对定位不是必需的，但您可能希望使用overflow：hidden来清除浮动元素。
- nfplee
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接