
むむ、アコーディオンがガタガタカックン・・・!?
目次
アコーディオンがガタつく原因
.slidetoggle()で開閉させるアコーディオンが開閉時にガタつく。。。ということはありませんか?
アコーディオンの動きをなめらかにしようとtransitionを設定している場合、transition : all 0.3s;のように”all”指定すると、そもそものslidetoggleの動きと干渉して、動きがガタガタカックンになってしまいます。
サンプル
- ガタつきアコーディオン 【click!】
- ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
対処法
そもそもslideToggleを引数なしでそのまま使うと400ミリ秒のアニメーションで開閉します。開閉スピードを調整したい場合は、.slideToggle()の引数に期間(ミリ秒)を設定する。
	$(function () {
		$(".js-accordion").click(function () {
			$(this).next("dd").slideToggle(700);
		});
	});サンプル
- ガタつきアコーディオン 【click!】
- ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
 ガタガタカックンガタガタカックンガタガタカックン
- なめらかアコーディオン 【click!】
- スルスルスムーズスルスルスムーズスルスルスムーズスルスルスムーズ
 スルスルスムーズスルスルスムーズスルスルスムーズスルスルスムーズ
 スルスルスムーズスルスルスムーズスルスルスムーズスルスルスムーズ
 スルスルスムーズスルスルスムーズスルスルスムーズスルスルスムーズ
 スルスルスムーズスルスルスムーズスルスルスムーズスルスルスムーズ
 スルスルスムーズスルスルスムーズスルスルスムーズスルスルスムーズ
 スルスルスムーズスルスルスムーズスルスルスムーズスルスルスムーズ
 スルスルスムーズスルスルスムーズスルスルスムーズスルスルスムーズ
開閉する要素に他のアニメーションを付けている場合、スピードの調整はtransition:transform .3s;のようにプロパティを限定して指定すれば良さそうです!
					あわせて読みたい
										
			
						transition - CSS: カスケーディングスタイルシート | MDN
						transition は CSS のプロパティで、 transition-property、 transition-duration、 transition-timing-function、 transition-delay、 transition-behavior の一括指定プ...					
				slidetoggleだけでなく、.slideopenや.slideclose に対しても同様ということです!ご注意ください〜!


