この記事は、jQueryでslideToggleやslideDownで開閉時にスムーズに動作せずカクカクするような動きになってしまう時の対処法について書いてます。
では、さっそくご紹介します。
【jQuery】slideToggleやslideDownでガタつく時の対処法
開閉する要素に、以下のcssプロパティを設定していないか確認し、あれば削除する。
- overflow
- height
- margin
- padding
わかりにくいと思うので、参考コードを入れときます。
<div class="desc">
<div class="desc_header">
ここをクリックすると詳細が表示されます
</div>
<div class="desc_body">
説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。
</div>
</div>↑の.desc_bodyに上記のcssプロパティがあると不具合が起きる可能性があります。
なので、開閉する要素にpaddingとか入れたい場合は、その中の要素に記述しましょう。
<div class="desc">
<div class="desc_header">
ここをクリックすると詳細が表示されます
</div>
<div class="desc_body">
<div class="inner">
説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。
</div>
</div>
</div>こんな感じで.innerみたいので囲って、ここにpaddingを記入するみたいな。
以上です！
あとがき
他にも原因になるパターンがあれば追加していこうと思います。
ちなみに、検証ツールの「要素」で開閉する要素を表示させた状態で、クリックしてみると一瞬style属性にoverflow・height・margin・paddingが入るのを確認できます。
