JavaScript

slidetoggleがカクカクする時の対処法【jQuery】

ニャンコ
ニャンコ

slideToggleを使ってスライドメニューを作ったのに、なんかカクカクする～

原因はだいたい同じだよ。
確認してみよう。

ワンコ
ワンコ

transitionが設定されてることが原因

早速答えですが、「transition」が設定されていることが原因です。

カクカクに動くスライドメニューを用意しました。
下記のボタンをクリックしてみてください。

ここをクリック

内容を表示

ソースは以下の通りです。

<div class="wrap">
  <h1 class="click">ここをクリック</h1>
  <p class="content">内容を表示</p>
</div>
.wrap {
  border: 1px solid #000;
}
.click {
  padding: 10px;
  background-color: #000;
  color: #fff;
  text-align: center;
}
.content {
  display: none;
  padding: 10px;
  transition: all 0.3s;
}
$('.click').click(function () {
  $('.content').slideToggle('slow');
});

ここで問題なのが、「.content」クラスに指定されている「transition: all」です。

.content {
  transition: all 0.3s;
}

「transition」は状態間の変化を定義するプロパティだよ。
この「transition」とjsの「slideToggle」が相互に影響しあって、カクカクになってるよ。

ワンコ
ワンコ

slidetoggleがカクカクする時の対策

対策としては、「transition: all 0.3s;」を削除する、もしくは変化させたいプロパティを指定するかになります。

.content {
　/* allを使用せずに変化させたいプロパティだけを指定する */
  transition: color 2s, background 2s;
}

これでスムーズに動くようになりました。
クリックして確認してみてください。

ここをクリック

内容を表示

-JavaScript
-,