jQueryのアニメーションとか勉強しました。Google+のサークルっぽくリストを表示できるjQueryプラグイン作ったよ。
深刻なjavascript力不足から徐々に抜け出せつつあるような気がしている今日この頃ですが、
jQueryプラグインというものを初めてリリースしてみました。
CircleList jQuery Plugin
http://kissrobber.appspot.com/circlelist_jquery_plugin/
↑のデモのような感じで、htmlのリストをGoogle+のサークルっぽい感じで表示する事ができるプラグインです。
最初はプラグインとかじゃなくて普通にGoogle+っぽくアイコンをうごかすページを作ってたんですが、
jQuery UIの機能（draggableとかselectableとか）と連携したくなった時にプラグインのルールにしたがって作っといた方が連携しやすい事に気がついて、
作り直して、
あ、これ公開できるじゃんって感じで公開してみました。
いろいろ学んだ事はあるんですが、
プラグインの作り方については、
http://www.ibm.com/developerworks/jp/web/library/wa-aj-jquery6/index.html
とか読んどけば十分
コード圧縮する事を考えてセミコロンを忘れないように付けろってやつは大変だった。
最近Rubyもやっているせいか、無意識にセミコロン抜けまくってて。
セミコロン忘れを簡単にチェックできる方法って無いのかな？
アニメーションとかは、
まぁ、テキトーにググったりすればいろいろ出てきます.
IEが言うこと聞かなかったりする事は相変わらずですのでこれはもう気合です。
CSS3のスタイルを使ったアニメーションは
- moz-transformじゃなくてMozTransformとか注意です。
↓を参考に、
http://yurubu.org/transform/592
んだけど、CSS３のスタイルを使った場合はうまくいかないところがあったので、今回のプラグインからは結局外しましたが。
あと、今回のような変な動きをさせる場合は、
animateに渡すstep関数を自作するんですが、
どっちにしても第一引数には何かを渡す必要があって、今回はダミーで値を変化しないz-indexを指定しました。
IEの場合はautoの扱いに注意です。
他、書くと長くなるので省略しますが、いろいろめんどくさかったっす。
ほか、なんか色々あったんですが、
忘れました。
とりあえず、個人的に一番学んだことはこれかな
