【jQuery】slideToggle()がカクつく原因とスムーズに動作させる対処法

slideToggle() は、要素の表示・非表示をスライドアニメーションで切り替える、アコーディオン実装時等に便利な jQuery のメソッドですが、動作がカクつく（滑らかでない）ことがあります。

このカクつきを防ぐための対処法を紹介します。

height の auto に対応する

slideToggle() は、アニメーション時に height を 0 から auto へ変化させます。しかし、auto は jQuery の animate() に適用できず、一度 scrollHeight を計算するために再描画が発生し、カクつきの原因となります。

max-height を使用し、CSS で適切な値を指定する。

.toggle-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-out;
}

$('.toggle-btn').on('click', function () {
  var content = $('.toggle-content');
  if (content.css('max-height') === '0px') {
    content.css('max-height', content.prop('scrollHeight') + 'px');
  } else {
    content.css('max-height', '0');
  }
});

✅ メリット: height: auto; を回避し、スムーズなアニメーションが可能

queue: false を指定する

jQuery のデフォルトのアニメーションでは、次のアニメーションがキューに追加されるため、短時間に slideToggle() を連打するとアニメーションが途切れることがあります。

オプション queue: false を追加することで、現在のアニメーションが進行中でもすぐに次の処理に移れるようになります。

$('.toggle-btn').on('click', function () {
  $('.toggle-content').stop().slideToggle(400, 'swing', { queue: false });
});

✅ メリット: クリック連打時のカクつきを防ぎ、スムーズに動作

stop(true, true) を追加する

slideToggle() を連続クリックすると、アニメーションが途中でキャンセルされ、カクついたり不自然な動作をすることがあります。

.stop(true, true) を追加し、現在のアニメーションを即座に停止して次の処理を開始する。

$('.toggle-btn').on('click', function () {
  $('.toggle-content').stop(true, true).slideToggle(400);
});

✅ メリット: クリック連打時にアニメーションが途中で止まるのを防ぐ

display: flex の影響を考慮する

slideToggle() は display: none から display: block に切り替えます。しかし、対象要素が display: flex の場合、アニメーションが適用されないことがあります。

CSS で display: flex の要素を visibility: hidden; opacity: 0; で制御する。

.toggle-content {
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
}

.toggle-content.active {
  visibility: visible;
  opacity: 1;
  max-height: 500px; /* 適切な値に調整 */
}

$('.toggle-btn').on('click', function () {
  $('.toggle-content').toggleClass('active');
});

✅ メリット: display: flex の要素でもスムーズにアニメーション可能

jQuery から CSS の transition に移行する

slideToggle() は jQuery のアニメーション機能を使用しており、CSS の transition に比べてパフォーマンスが落ちることがあります。

jQuery の slideToggle() を使わず、CSS の transition を活用する。

.toggle-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.toggle-content.active {
  max-height: 500px; /* 適切な値に調整 */
}

$('.toggle-btn').on('click', function () {
  $('.toggle-content').toggleClass('active');
});

✅ メリット: CSS アニメーションの方が高速で、よりスムーズな動作が可能

まとめ

問題点	解決策
height: auto; が影響	max-height を使用する
連続クリックでカクつく	.stop(true, true) を追加
display: flex に対応しない	visibility: hidden; opacity: 0; を使う
jQuery の slideToggle() が重い	CSS の transition に移行

slideToggle() のカクつきは、主に height: auto; の問題やクリック連打によるアニメーションの蓄積が原因です。
適切な方法を選んで、スムーズなアニメーションを実装しましょう！