今回はjQueryのfadeIn()が効かない場合の対処法を紹介します！
うまく効かなくてハマってしまった人は原因があるはずなので見ていきましょう。
fadeIn()が効かない原因1：要素を非表示にしていない
fadeIn()は非表示の要素をフェードインさせるメソッドです。最初に要素を非表示にしないとフェードインしてくれません。
解決策は2つあります。
1つ目は、$('.selector').hide().fadeIn()というようにhide()を使って非表示にしてからフェードインさせる方法です。
2つ目は、フェードインさせたい要素に最初にCSSでdisplay: none;を指定しておいて、fadeIn()させる方法です。
どちらを使っても同じなので好きな方を使いましょう。
fadeIn()が効かない原因2：opacityを指定している
フェードインさせる要素にopacityを指定していると効きません。
fadeIn()はopacityの値を操作しているので、自分で指定してしまうとうまく動かなくなります。エラーでハマったらopacityを外してみてください。
もし不透明度を調整しながらフェードインさせたい場合はfadein()は使わずにopacityで操作してaddclassでクラスの付け外しをしたほうがいい
fadeIn()が効かない原因3：transitionを指定している
フェードインさせる要素にtransitionを指定していると効きません。
transitionを指定しなくても勝手にふわっとフェードインしてくれます。指定していた場合は外しましょう。
もしフェードインにかかる時間を指定したい場合は、fadeIn(500)というように引数にミリ秒で指定できます。transitionは使わずに引数で指定するようにしましょう。
fadeIn()が効かない原因4：スペルミス
かなり初歩的なミスですが…
○ fadeIn()
× fadein()
です。「I」は大文字です！
案外気付かないので注意してくださいね。
fadeIn()が効かない原因5：セレクタ記述ミス
これはもはやfadeIn()関係ないですが、個人的によくはまりがちなところなので。
$('class')と書いている（クラス指定なのに「.」が抜けてる）せいで「jQuery動かねー」ってやってることがぼちぼちあります（アホ）
「.」のつけ忘れとかはなかなか気付けずにはまりがちなので、「jQueryの記述に問題がないのに動かない…」となった場合はセレクタの指定ミスがないか確認してみてください。
それでも動かない場合は…
fadeIn()を使うのは諦めて、クラスの付け外しによってフェードインさせます。フェードイン自体はCSSで操作します。
CSS
.selector {
opacity: 0;
transition: 500ms;
}
.selector.is-fadein {
opacity: 1
}jQuery
$('.selector').click(function () {
$(this).addClass('is-fadein');
});
ポイントはCSSのtransitionです。
jQueryによって付与させるクラスではなく、元のクラスにtransitionを指定してください。じゃないとうまく動きません。
処理としては簡単で、何かイベント（今回はクリック）が発生した時にクラスをつけることでtransitionで指定した秒数をかけながらopacityを0から1にします。
自分もなぜかfadeIn()がずっと動かなくてハマった時がありましたが、CSSでフェードインさせる方法ならちゃんと動いてくれました。
まとめ
fadeIn()はjQueryでもよく使うメソッドです。
動かない原因を理解して使いこなせるようになりましょう！
