- 2008-08-12 (火)
- 技術
サンプルコードを書いていないんだけど、ちょっと基本的かつ意外とハマる問題かな～と思ったのでメモメモ。
とは言っても2点だけｗ
スライドするdivタグの中にはoverflow:autoなdivタグは入れないほうがいいかも
このシチュエーションは意外あると思う。
divタグ（div1）の中に複数のdivタグ（div2）が入っていて、外側のdiv1をアニメーションでスライドさせてdiv2の部分を切り替えるシチューエーションの場合、div2がoverflowをautoになっているとFirefoxでチラチラする。
他のブラウザではこのチラチラ現象は起きないんだけど、どうしてもFirefoxで起きてしまう。
（IE6.0、IE7.0、Safari3.1、Opera9.5ではチラチラしない）
解決策
これを防ぐにはoverflowをhiddenとかにしてautoじゃない状態にする。
ちなみにjQueryでは、animate関数（3026行目の中でこのチェックをしているがアニメーションするdivタグの中にいるdivタグには適用されないので自分でhiddenにする必要がある。
アニメーションする前にhiddenにして、アニメーションが終わったらautoに戻す感じね。
スライドするときにmarginをマイナスとかにしてスライドするとIE6で重くなる場合がある
jFlowというスライド用のjQueryプラグインではmarginLeftやmarginTopを使って対象エレメントの位置をずらしているんだけど、もしかするとIE6.0でめちゃくちゃ重くなる可能性がある。
たとえば画像がたくさん入っているdivタグが何枚もあって、そんなエレメントをmarginを使ってスライドする場合は結構厳しい。IE7.0ではすんなりスライドしてくれるんだけど、IE6.0だけカクカクしちゃう。
本来jQueryのanimateはブラウザ依存しないでキレイにアニメーションしてくれるんだけど、このmarginだけは特別なのかしら？
解決策
position:absoluteで位置をスライドするようにする。
とりあえずこれでIE6.0でもカクカクせずに、本来のサクサク感を出すことができる。
まとめ
全ブラウザで同じ感じでアニメーションさせるのは、たとえjQueryを使っていてもなかなか難しい・・・
日々精進でありますっ！
- Newer: Event.observeでセットするfunction内のthisについて
- Older: 買った本
Comments:0
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1092
- Listed below are links to weblogs that reference
- JavaScriptでアニメーション（animate）するときに気をつけたいこと from HouseTect, JavaScript Blog
