的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高度「跳樓」

回答

相關問題