的slideToggle高度“跳楼”

我的jQuery slideToggle()实验的slideToggle高度“跳楼”

谁能告诉我为什么我的箱子“跳”当我打开呢？上半场他们滑落，其余他们“跳”？

谢谢， 约翰内斯

2010-02-24 Johannes

我在很多场合中，我是动画只是slideToggle但不是保证金/填充高度发现了这个问题。

所以，这样的事情可能会解决这个问题：

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

来源

2010-02-24 17:20:19 Seb

最快的修复你的情况：

.message_container { width: 361px; }

我不知道确切原因，但不给容器固定宽度当包含<p>会导致问题时，给它一个，并且跳动消失。

来源

2010-02-24 17:21:59

这也似乎是其他面向文本的eleme真nts，例如''。 – joanwolk 2012-05-30 10:21:11

它是一个简单的修复。这个CSS规则添加到您的样式表（测试在Firebug工作，并从我这个问题以往的经验，这是修复）：

ol.message_list { position: relative }

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

来源

2010-02-24 17:33:03

+1已测试。似乎已经把它清理干净了。 – Sampson 2010-02-24 17:37:26

我有同样的问题，并尝试此修复程序，但它并没有为我工作，所以我不得不放弃，采取不同的方法（就在幻灯片之前，使滑入部分可见不透明度0，移动容器多了起来，然后再往下滑）。 – ehdv 2010-02-24 20:12:48

刚刚有这个问题，感谢Google＆Stack Overflow这个解决方案也适用于我。要抽象它，幻灯片元素的容器需要'position：relative'。 – bcmcfc 2010-11-04 12:07:46

意外的是，我认为最简单的解决方案是将自定义函数添加到带有动画填充/ margin-top/bottom的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-25 14:15:02 Adarchy

css padding和jquery slideToggle在一起工作不好。尝试填充填充。

来源

2013-03-27 12:24:59 Bloggerschmidt

什么帮助对我来说是

overflow: hidden

到该切换...

来源

2015-08-28 09:49:49 Youngcut

'溢出：隐藏;'是我的魔力酱。我试过'position：relative;'和'min-height：0;'，但都没有成功。 – 2015-12-10 14:13:40

也为我工作，但我不明白为什么...... – 2016-05-21 12:27:58

这也是为我工作的修复程序。 – 2016-12-13 15:13:09

如果设置，min-height属性还可以引发这样的毛刺。在这种情况下，你需要重新设置：

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

来源

2015-09-28 21:42:45 kursus

我觉得最简单的解决通常是指从滑动元件取出填充，并添加填充到元素内滑动元件。

在这个例子中与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>

它现在又顺畅

来源

2016-01-28 14:48:20

的slideToggle高度“跳楼”

回答

相关问题