2022年1月11日

slideToggleがカクカクしてスムーズに動作しない時の対処法

jQueryのslideToggleがカクカクしてお困りでしょうか?
手軽にアコーディオンメニュー等を実装できるjQueryのslideToggleですが、特定の条件下において、いつもスムーズな動作のはずがカクカクとした不自然な動作になってしまう場合があります。

今回はそんなslideToggleの不自然な動作を解決する方法を書いています。

slideToggleがカクカクしてしまう原因

slideToggleがカクカクしてしまう原因、それはCSSでちょっとした動きの演出でよく使う「transition」の指定です。slideToggleを使用しているあたりで、「transition: .4s;」といった指定をしていませんでしょうか。この記述では省略していますが、transitionを「all」で指定してしまうと、slideToggleが干渉してカクカクした動作になってしまうようです。

解決

transitionを「all」で指定している箇所を、使用するプロパティのみに指定してあげることで解決できます。

解決例
「transition: .4s;」 →「transition: transform .4s;」

以上、SlideToggleがカクカクしてスムーズに動作しない時の対処法でした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です