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
詳しくはサンプルのソースを見て!
あとは工夫次第でいろいろなんとでもできる。

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



You might also like

1 Comment

  • Edisson

    4月 th, 2014 12:02 AM

    Created the greatest arietlcs, you have.