jQuery fadeInはdisplay:noneを表示できるが、animateでopacityをいじった場合はダメ

いや、まぁばかばかしい話なんですけどね。

jQueryでフェードインのアニメーションを作る時、普通はfadeIn()を使うと思うんですよね。
フェードインしたい要素をdisplay:noneにしておいて、fadeIn()すると。

これに加えて、位置を動かしたり大きさ変えたりしたい時はanimate()を使うことになると思います。
animateだと、元々CSSで設定されている状態から、animateの引数で設定したCSSの状態に徐々に切り替わるというアニメーションになります。
animateでフェードする時はopacityを設定して徐々に透明度を変化するよう設定すると思います。

で、元々見えなかった要素を徐々に表示するアニメーションを作るにあたって、普段fadeIn()を使う感覚で、CSSでdisplay:noneにして置いたんですね。
その要素に対してanimate()を設定し、opacityが1になるようにしたのですが、表示されない。

ホントばかばかしいんですがこんなところで一瞬はまりまして。
よく考えればopacityが0だろうが1だろうが、display:noneである限り見えないに決まってます。

animate()でフェードインするなら、初期設定はdisplay:noneではなく、opacity:0にしておく必要があるんだね、という話。