web-dev-qa-db-ja.com

JqueryのslideToggle効果がスムーズではない

_<div class="searchDiv">
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
</div>
_

最初は_display:none_を使用して非表示になっているクラスsearchDivを使用してdivで$("div.searchDiv").slideToggle("slow");を呼び出そうとしています。クラスrowの4つのdiv内にいくつかのdiv要素があります。メインdiv内に配置された要素のトグル効果がスムーズではないことがわかったため、要素がメインdiv内にどのように配置されているかは重要ですかsearchDiv。

jqueryslidetoggle
9
user2585299

何かがスムーズに見えるかどうかという考えは意見であり、誰がそれを見ているかによって異なります。低速を使用している場合は、200ミリ秒の値が与えられます。

SlideToggle。 https://api.jquery.com/slideToggle/

期間はミリ秒単位で指定されます。値が大きいほど、アニメーションは遅くなり、速いアニメーションではありません。文字列「fast」および「slow」を指定して、それぞれ200ミリ秒と600ミリ秒の期間を示すことができます。

デフォルトのイージングは​​swingで、私にはラフに見えます。緩和のために線形を試すことをお勧めします。

スイングまたは線形が十分にスムーズでない場合は、jQuery UIを使用してインクルードし、他のオプションの1つを使用できます。必要に応じてスムーズに機能すると思われるイージングを見つけることができます。
http://jqueryui.com/resources/demos/effect/easing.html

$('.searchDiv').slideToggle(2000,"linear", function () {
    // actions to do when animation finish
});
7
donlaur

私はこれが古いことを知っていますが、それが他の誰かを助ける場合に備えて、トグルされた要素にmin-heightプロパティを設定したときに問題を見つけ、固定の高さに設定するとこれが解決しました。

5
TJ15

行に幅を追加する必要があります。

jQueryは、非表示のdivが表示されるまでそのサイズを認識しません。そのため、クリックすると、実際に位置がずれて測定され、すぐに交換されます。これはしばしば、いくらかのジャンプを引き起こすという副作用があります。要素に幅を設定すると、jQueryが要素を所定の位置から引き出せなくなります。

4
Tomer Almog

私も同様の問題を抱えていました。 2つのことが私のためにそれを修正しました。

  1. 要素の既存のトランジションCSSを削除する必要がありました。
  2. 「クリックバー」（h2）内に、マージンを0に設定する必要のある要素がありました（他の要素を間違った境界にアニメーション化していたため、最後に奇妙なスナップが発生していました）
3
Ivan Town