Home » Tech&Tips » jQueryで遊んでみる その6

jQueryで遊んでみる その6



Posted by: かむ  Posted date:  5月 11, 2010  |  No comment


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

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

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

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




関連エントリ
  1. jQueryで遊んでみる その3
  2. jQueryで遊んでみる その2
  3. jQueryで遊んでみる その4





Leave a Comment





 

«
»