jQueryのfadeIn()が効かない場合は、transitionプロパティを指定しているか確認

jQueryのfadeIn()が効かないという現象に遭遇しまして、transitionプロパティを削除したら解消したという現象に最近遭遇したので、備忘録的な感じで書いときます。

fadeIn()が効かない

「fadeIn()が効かない」と書きましたが、要素の表示・非表示はできていて、 fadeIn()特有の透明度を操作ではなくて、jQueryのshow()のような挙動になるという現象です。今回はjQueryのバージョンは、1.10.1です。

transitionプロパティが原因??

そのフェードインさせる要素には、他のアニメーション関連のために、transitionプロパティを指定していました。(細かいことを言うと指定していたのは、transitionプロパティではなくて、下記のように「transition-property」「transition-duration」「transition-timing-function」です。)

selector {
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;	
}

transition関連のプロパティを削除したらfadeIn()が無事に動作しました。この現象は旧バージョンの1.9.1と1.8.3でも起こっていました。

一応下記にプレビューを用意しました。