jQueryで遊んでみる その6

だらだらと続いているこのシリーズ
ほとんど覚え書き状態になりつつあるけど気にせず突き進むのだ。

Lightbox系のエフェクトが当たり前に使われてて
jQueryのライブラリもたくさん出てる。

こういったエフェクトは、基本的にcssとanimateの組み合わせでできてる。
ということで、jQueryでできるアニメーションの基本部分を見てみたい。

まずはサンプル　

サンプル1

$(this).animate({最終形態のCSS},実行スピード); こんな感じでアニメーションが簡単に作れる。

サンプル2

toggleを使って、最初のクリックと次のクリックで違う動作を割り当てて
ちゃんと元に戻るように指定。

サンプル3

easingプラグインを使って、加速減速効果を追加してみる。

$(this).animate({最終形態のCSS},実行スピード,easing名); ※easing名を第3引数に追加。

jQuery Easing Plugin

easingプラグイン効果一覧

jQuery Easing

詳しくはサンプルのソースを見て！
あとは工夫次第でいろいろなんとでもできる。

という投げやりなエントリですまぬ。