我的 jQueryslideToggle()实验
谁能告诉我为什么当我打开它们时我的盒子会“跳”起来？上半场他们滑，其余他们“跳”？？
谢谢， 约翰内斯
问问题
33357 次
13 回答
24
Its a simple fix. Add this CSS rule to your stylesheet (Tested in Firebug to work, and from my past experience with this problem, this is the fix):
ol.message_list { position: relative }
It is a CSS bug, not a jQuery bug per se.
于 2010-02-24T17:33:03.270 回答
24
对我有帮助的是
overflow: hidden
到那个切换...
于 2015-08-28T09:49:49.490 回答
11
在您的情况下最快的解决方法：
.message_container { width: 361px; }
我不确定为什么，但是在包含<p>导致问题时没有给容器一个固定的宽度，给它一个并且跳跃消失。
于 2010-02-24T17:21:59.480 回答
6
css padding 和 jquery slideToggle 不能很好地协同工作。尝试框出填充。
于 2013-03-27T12:24:59.147 回答
5
我在很多情况下都发现了这个问题，其中我只使用高度slideToggle而不是边距/填充来制作动画。
所以，这样的事情可能会解决它：
$("#thediv").slideToggle().animate({"margin-bottom": "toggle"});
于 2010-02-24T17:20:19.713 回答
4
如果设置，该min-height属性也可以触发这样的故障。在这种情况下，您需要重置它：
.toggle-container {
position: relative;
min-height: 0;
}
于 2015-09-28T21:42:45.807 回答
2
意外地，我认为最容易使用的解决方案是使用动画填充/边距顶部/底部向 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');
我的示例动画不透明度切换图，您可以根据需要对其进行修改。
于 2012-10-25T14:15:02.583 回答
2
我发现最简单的解决方法通常是从滑动的元素中删除填充，并将填充添加到滑动元素内的元素。
在此示例中，具有属性的 divdata-role="content"是滑动的，并且填充应用于tab-example__content
<div data-role="content" class="tab-example__content">
...
</div>
为了修复“生涩”的滑动，我在滑动元素中添加了一个新的 div 并将类/填充移至该位置，如下所示：
<div data-role="content">
<div class="tab-example__content">
...
</div>
</div>
现在很好很流畅
于 2016-01-28T14:48:20.967 回答
0
我发现了另一个影响它的东西。min-height从该元素的 CSS 中删除它为我修复了它。
于 2018-05-10T15:30:36.417 回答
0
我不知道这是否仍然是一个问题，但为我解决的问题是我以前使用 CSS 来“动画”它，所以我transition对元素产生了影响。删除它为我修复了它。
于 2019-05-10T02:03:32.083 回答
0
我发现在切换容器上设置宽度为我解决了这个问题
.toggle-container {
width: 100%; }
}
我读到 slideToggle 依赖于起始宽度和高度才能正常运行，因此根据您的页面，您可能需要设置宽度或高度以获得您期望的行为。
于 2018-07-25T12:12:48.187 回答
0
如果默认情况下切换框没有高度，则需要添加它，对于自动高度添加：
.toggle-container {
height: auto;
}
于 2018-06-20T10:43:24.530 回答
0
在我过去的情况下，我遇到了同样的问题，问题是transition: all 350ms;我的 CSS 中的声明与.slideToggle. 删除它为我修复了它，所以在 CSS 中查找转换。
于 2018-10-10T16:19:36.320 回答