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にしておく必要があるんだね、という話。

コメント

このブログの人気の投稿

FacebookアプリのSMSアップデートの通知をオフにする

子どもがマイクラPEで、友だちとオンラインマルチプレイをやりたいと言い出したときの話。

Adobe Photoshop CS6の自動保存機能のファイル保存場所