Home > 2010年 5月 31 日

05月31日 

javascript

jQueryでアニメーションさせるとき


jQueryに限った話では無いかとも思うのですが…

ブロック要素をスライドさせたりしてアニメーションさせる時、表示がガタガタと乱れて見苦しい時があります。そんな時は…

アニメーションさせるブロック要素に「overflow:hidden」を指定するとよろし。というTips

スクロールバーが既に出てるブロック要素なら、アニメーションの開始直前に指定してあげれば見た目上にはあまり違和感無しです。
んでここからが大事で、iPhone用のWebアプリを作る時にそれっぽいUIを実現することが出来る「jQTouch」。画面遷移アニメーションで結構ガタつきます。
そんな時にもこのTips、画面単位のDIVにoverflow:hiddenを指定してあげると(多少w)改善されます。

ちなみにローカルアプリをHTML+CSS+JSで構築し、DBにはHTML5のClient-side Databaseを使いましたが、PhoneGapでアプリ化しても何のトラブルも無くiPadアプリとして使用できました。スゲー。
(結局は色々な問題点があってWebアプリとしてサーバー上にリソースを置くことになったんですけどね…)

PhoneGap使えばGPS拾ったりコンタクトリストからデータを引っ張ったり、カメラを起動したりと結構色々な事が出来るので、UIが少し緩かっても大丈夫とか高機能性を求めないのであればオススメですよー(って何記事?)