jQuery Easing Plugin | エフェクト動作パターン集

jQuery Easing Plugin は、jQuery のエフェクト動作パターン集のようなプラグイン。jQuery にも、linear と swing のシンプルな動作パターン( easing )は用意されているが、jQuery Easing Plugin を導入すると、30種類以上もの、変化に富んだ動作パターンを使えるようになる。
エフェクト動作パターンは、animate などで使うことが多い。(参照:animate の動作パターンの指定方法

導入

jQuery Easing Pluginより、jquery.easing.1.3.js を、ダウンロード。「 jquery.easing.1.3.js 」ファイルを、自分のサイトのサーバーにアップロード。
使用したいページで、下記のようにして読み込む。「 jquery.easing.1.3.js 」ファイルへのパスは、アップロードした場所を指定する。

<script type="text/javascript" src="jquery.easing.1.3.js"></script>

jQuery Easing Plugin 使用例

jQuery Easing Plugin の動作パターンを、animate に使用した例。
赤いブロック部分を、クリックすると、グレーのブロック部分が、左に動きながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、右に動きながら出現。動き方( easing )は、それぞれのタイトルごとに異なる。タイトルが、動作パターン名であり、これを easing: 動作パターン; に指定してある。

jswing

animate( { width: 'toggle',}, { duration: 2000, easing: 'jswing', } )

easeInQuad

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInQuad', } )

easeOutQuad

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeOutQuad', } )

easeInOutQuad

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInOutQuad', } )

easeInCubic

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInCubic', } )

easeOutCubic

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeOutCubic', } )

easeInOutCubic

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInOutCubic', } )

easeInQuart

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInQuart', } )

easeOutQuart

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeOutQuart', } )

easeInOutQuart

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInOutQuart', } )

easeInQuint

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInQuint', } )

easeOutQuint

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeOutQuint', } )

easeInOutQuint

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInOutQuint', } )

easeInSine

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInSine', } )

easeOutSine

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeOutSine', } )

easeInOutSine

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInOutSine', } )

easeInExpo

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInExpo', } )

easeOutExpo

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeOutExpo', } )

easeInOutExpo

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInOutExpo', } )

easeInCirc

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInCirc', } )

easeOutCirc

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeOutCirc', } )

easeInOutCirc

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInOutCirc', } )

easeInElastic

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInElastic', } )

easeOutElastic

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeOutElastic', } )

easeInOutElastic

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInOutElastic', } )

easeInBack

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInBack', } )

easeOutBack

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeOutBack', } )

easeInOutBack

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInOutBack', } )

easeInBounce

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInBounce', } )

easeOutBounce

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeOutBounce', } )

easeInOutBounce

animate( { width: 'toggle',}, { duration: 2000, easing: 'easeInOutBounce', } )

スポンサード リンク

カテゴリー: Easing, JavaScript, jQuery, アニメーション, プラグイン パーマリンク