slideToggle 高度是“跳跃”

Posted 2023-02-25

【中文标题】slideToggle 高度是“跳跃”

【英文标题】：slideToggle height is "jumping"

【发布时间】：2010-02-24 17:14:52

【问题描述】：

我的 jQuery slideToggle() 实验

谁能告诉我为什么我的盒子在打开时会“跳”？上半场滑，下半场“跳”？？

谢谢， 约翰内斯

【参考方案1】：

这是一个简单的修复。将此 CSS 规则添加到您的样式表中（在 Firebug 中测试可以正常工作，根据我过去解决此问题的经验，这是修复方法）：

ol.message_list  position: relative 

这是一个 CSS 错误，而不是一个 jQuery 错误。

【讨论】：

我遇到了同样的问题，并尝试了这个修复，但它对我不起作用，所以我不得不放弃并采取不同的方法（在幻灯片之前，制作滑入部分不透明度为 0 可见，将容器向上移动这么多，然后将其向下滑动）。

刚刚遇到这个问题，感谢 Google 和 Stack Overflow，这个解决方案也对我有用。为了抽象它，滑动元素的容器需要position:relative。

在我的例子中，要切换的元素及其父元素都需要 position:relative-fix。

【参考方案2】：

对我有帮助的是

overflow: hidden

到那个开关...

【讨论】：

overflow: hidden; 是我的魔法酱。我试过position: relative; 和min-height: 0;，但都没有成功。

【参考方案3】：

在您的情况下最快的解决方法：

.message_container  width: 361px; 

我不确定具体原因，但在包含 <p> 时不给容器固定宽度会导致问题，给它一个，然后跳动就消失了。

【讨论】：

这似乎也适用于其他面向文本的元素，例如<label>。

【参考方案4】：

css padding 和 jquery slideToggle 不能很好地协同工作。尝试框出填充。

【参考方案5】：

我在很多情况下都发现了这个问题，我只使用slideToggle 设置高度而不是边距/填充。

所以，这样的事情可能会解决它：

$("#thediv").slideToggle().animate("margin-bottom": "toggle");

【参考方案6】：

如果设置，min-height 属性也可以触发此类故障。在这种情况下，您需要重置它：

.toggle-container 
position: relative;
min-height: 0;

【参考方案7】：

我意外地认为最容易使用的解决方案是将自定义函数添加到带有动画填充/边距顶部/底部的 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');

我的示例动画不透明度切换图，您可以根据需要进行修改。

【参考方案8】：

我发现最简单的解决方法通常是从滑动的元素中移除填充，然后将填充添加到滑动元素内部的元素。

在本例中，属性为data-role="content"的div是滑动的，填充应用于tab-example__content

<div data-role="content" class="tab-example__content">
    ...
</div>

为了修复“生涩”的滑动，我在滑动元素中添加了一个新的 div，并将类/填充移至该位置，如下所示：

<div data-role="content">
    <div class="tab-example__content">
        ...
    </div>
</div>

现在很流畅

【参考方案9】：

我发现了另一个影响它的东西。从该元素的 CSS 中删除 min-height 为我修复了它。

【参考方案10】：

如果切换框默认没有高度，你需要添加它，自动高度添加这个：

.toggle-container 
 height: auto;

【参考方案11】：

我发现在切换容器上设置宽度为我解决了这个问题

.toggle-container  
   width: 100%; 

我读到 slideToggle 依赖于起始宽度和高度才能正常运行，因此根据您的页面，您可能需要设置宽度或高度以获得您期望的行为。

【参考方案12】：

在我过去的情况中，我遇到了同样的问题，问题是我的 CSS 中的 transition: all 350ms; 声明与 .slideToggle 冲突。删除它为我修复了它，因此请查找 CSS 中的转换。

【参考方案13】：

我不知道这是否仍然是一个问题，但对我来说解决它的是我以前使用 CSS 来“动画”它，所以我对元素有一个 transition 效果。删除它为我修复了它。