2010年5月26日水曜日

jQueryのfadeOutの挙動が面白い。

jQueryのfadeOutで面白い現象が起きたのでメモです。
(fadeOutを指定していない要素まで一緒に消えてしまうバグ?)

例えば#main,#subという二つのブロック要素を用意し、
#mainをjQueryで $("#main").fadeOut(3000);などと設定し、
#subをcssで予め、position:relative;にして、
left top;と指定し、
 $("#sub").animate({left:"100px",top:"100px"},1000);
とか指定します。

するとブラウザで確認すれば、fadeOutを指定してない#subまで一緒にfadeOutしてしまうではないですか(笑)

どうも、
.animateで({top:"100px"},1000);
と上の要素に連動しているから、影響を受けるようですね。

ちょっと楽しい。

このtopを指定しなければいいかと消したら、
上の#main要素が消えた後に、「ガコッ」と下の#sub要素が上がってしまう、という現象に変わりました(笑)。
ま、これは当然の挙動ですね。
上のブロックが消えるわけですから。

jQuery、奥が深いです。
たのしや。

0 件のコメント:

コメントを投稿