jQueryで遊んでみる その6

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

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

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

まずはサンプル 

サンプル1


$(this).animate({最終形態のCSS},実行スピード);

こんな感じでアニメーションが簡単に作れる。


サンプル2


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


サンプル3


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

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

jQuery Easing Plugin



easingプラグイン効果一覧

jQuery Easing



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

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



Related Posts

1 Comment

  • Edisson

    4月 th, 2014 12:02 AM

    Created the greatest arietlcs, you have.