こうめの"これから使える"jQueryプラグイン デモページ


« 紹介ページへ戻る

jQuery Transit

このページでは、実際に下のセクションでプラグインを実行しています。動きを確かめるだけでなく、ソースを見たり、インスペクタを利用して色々と手を加えてみたりして、プラグインの詳細な挙動を確認してみましょう。

DEMO

要素をマウスオーバーするとアニメーションが実行されます。

アニメーションの例

要素の移動
要素の回転(2次元)
要素の回転(3次元)
要素の拡大

紹介ページに掲載したアニメーション ※紹介ページ Step3

透明度と高さの変更
指定秒数後にアニメーション

※ここではマウスオーバーしてから1000ms後に実行されます。

アニメーション後にスクリプトの実行をする
アニメーションの変化スピードをカスタマイズ
複数のアニメーション処理を連続して実行

easing

linear
ease
in
out
in-out
snap
easeOutCubic
easeInOutCubic
easeInCirc
easeOutCirc
easeInOutCirc
easeInExpo
easeOutExpo
easeInOutExpo
easeInQuad
easeOutQuad
easeInOutExpo
easeInOutExpo
easeInOutQuad
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInBack
easeOutBack
easeOutBack

過去のデモページ

過去のプラグイン紹介ページ