jQueryのfadeInがちらつく、うまく動作しないときの対処法

fadeIn()やslideDown()の挙動がおかしくなるときがあるので、その原因について解説します。

fadeIn()、fadeOut()がうまく動作しないとき

原因CSSでopacityにtransitionを指定してしまっている

fadeIn()、fadeOut()はCSSのopacityの値を変化させているので、CSSでもopacityにtransitionを指定していると、うまく動作しません。

特に、下のように全てのプロパティにtransitionを指定しているときは要注意です。

.btn {
	transition: .5s;
}

↓改善策。opacity以外の変化させたいプロパティだけにtransitionを指定しましょう。

.btn {
	transition: background-color 1s, color 1s;
}

slideDown()、slideUp()がうまく動作しないとき

原因CSSでheight、padding-top、padding-bottomにtransitionを指定してしまっている

slideDown()、slideUp()はCSSのheight、padding-top、padding-bottomの値を変化させているので、CSSでもこれらのプロパティにtransitionを指定していると、うまく動作しません。

↓改善策。height、padding-top、padding-bottom以外の変化させたいプロパティだけにtransitionを指定しましょう。

.btn {
	transition: background-color 1s, color 1s;
}