2012年05月22日

jQuery の fadeIn(), fadeOut() が IE で absolute or relative のときに効かない

jQuery の標準エフェクトの1つ fadeIn() と fadeOut() を使用していて気付いたのですが、IE8 でうまくエフェクトしてくれないことがあります。

(ちなみに僕のテスト環境は、
jQuery1.7.2
Mac(lion) Safari5.1.7, FireFox12, Chrome19
Win(XP) IE8, FireFox12
です。)

具体的には css で position が absolute または relative のときにエフェクトしません。ぱっと消えて、ぱっと現れます。show(), hide() と同じです。

しかたがないので、そのときだけ javascript 中に、

//ie対策
$(".hogehoge").css("position", "static").fadeIn("normal", function(){
    $(".hogehoge").css("position", "relative");
    ...
});

とすることにしました。
エフェクトが済んだら absolute なり relative なりに再び戻すということです。

まあ、お分かりのように根本的な解決ではなくて、対症療法的な一時しのぎです。たとえ一時的にせよ static にしたらウェブデザインが崩れちゃう場合もあるわけですからね。

ラベル:jquery javascript
posted by ガトー at 19:16| Comment(0) | WEB | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。