web-dev-qa-db-ja.com

slideToggle高さは「ジャンプ」します

私のjQuery slideToggle()実験

私の箱を開いたときに、なぜ箱が「ジャンプ」するのか、誰か教えてもらえますか？前半はスライド、残りは「ジャンプ」??

ありがとうヨハネス

jqueryslidetoggle
28
Johannes

その簡単な修正。このCSSルールをスタイルシートに追加します（Firebugで動作することがテストされています。これまでのこの問題の経験から、これが修正です）：

ol.message_list { position: relative }

これはCSSのバグであり、jQueryのバグそのものではありません。

23
Doug Neiner

私に役立っているのは

overflow: hidden

そのトグルに...

21
Youngcut

あなたのケースで最も速い修正：

.message_container { width: 361px; }

正確な理由はわかりませんが、<p>を含むときにコンテナーに固定幅を指定しないと問題が発生します。問題が発生すると、びくびくしなくなります。

11
Nick Craver

cssのパディングとjqueryのSlideToggleが一緒に機能しません。パディングを囲みます。

6
Bloggerschmidt

設定されている場合、min-heightプロパティもこのような不具合を引き起こす可能性があります。この場合、それをリセットする必要があります：

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

この問題は、高さだけをslideToggleでアニメーション化していて、マージン/パディングをアニメーション化していない多くの場面で見つかりました。

だから、このような何かがそれを解決するかもしれません：

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

偶然にも、最も簡単に使用できるソリューションは、アニメーションのパディング/マージン-トップ/ボトムを使用してカスタム関数を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');

私の例のアニメーション化された不透明度の切り替えtuは、必要に応じて変更できます。

2
Adarchy

最も簡単な修正は通常、スライドする要素からパディングを削除し、要素にパディングを追加することですinsideスライド要素。

この例では、data-role="content"の属性を持つdivがスライドする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>

スムーズでスムーズになりました

2
Ben Crook

私の過去の状況で私は同じ問題を抱えていました、そして問題は私がtransition: all 350ms;と競合する私のCSSの宣言.slideToggle。それを削除すると修正されたので、CSSで遷移を探します。

0
Usce

トグルされたボックスがデフォルトで高さを持たない場合は、それを追加する必要があります。自動高さの場合はこれを追加します。

.toggle-container {
 height: auto;
}
0
Ivan Skoropadsky

私はそれに影響を与えるさらに別のことを見つけました。その要素のCSSからmin-heightを削除すると、修正されました。

0
quemeful

トグルされたコンテナーに幅を設定すると問題が解決した

.toggle-container { 
   width: 100%; }
}

私は、slideToggleが正しく機能するために開始の幅と高さに依存していることを読んだので、ページによっては、期待される動作を実現するために幅または高さを設定する必要があるかもしれません。

0
pickles

これがまだ問題かどうかはわかりませんが、問題を修正したのは、以前にCSSを使用して「アニメーション化」していたため、要素にtransitionの影響があったためです。それを取り除くことで修正されました。

0
kzhao14