jQueryのアニメーションを拡張していろいろな動作を簡単に実装するプラグイン jQuery Easing Plugin

Tweet

238

jQueryにはアニメーションの動作の設定があります

ただし、デフォルトではたったの2つしかありません、CSSではいろいろな動作がデフォルトで幾つかあり

それに、ベジュ曲線でいろいろなアニメーションのタイミングを作れます

jQueryでもアニメーションを豊富にしたい場合は

jQuery Easing Plugin を使うと実現出来ます

jQuery Easing Plugin の使い方

http://gsgd.co.uk/sandbox/jquery/easing/

GitHub https://github.com/gdsmith/jquery.easing

縮小版は GitHub の方にあります。

まずは、上記のURLから プラグインをダウンロードします

次にjQueryと一緒にHTMLで読み込みます

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

これはCDNですので、このままコピペしても使えます

ダウンロードしたものは、各自パスを合わせて読み込めるようにしてください

全体のアニメーションを変更する

<script>
jQuery.easing.def = "string";
</script>

”string”のところには アニメーション名を入れると

全体のデフォルトのアニメーションを変更できます

一部のアニメーションを変更する

<script>
  $('.menu-btn').on('click',function(){
    $('.menu-in').slideToggle(700,"easeOutQuart");
  });
</script>

700はアニメーション速度、”easeOutQuart” はアニメーション名

その後にはanimateと同様にコールバックを指定出来ます

それぞれのアニメーションは

公式サイトのアニメーションのサンプルから選ぶか

http://gsgd.co.uk/sandbox/jquery/easing/

こちらのサイトが、マウスオーバーだけでアニメーションが確認できて アニメーション名もコピペしやすくて便利です

http://easings.net/ja

Tweet

短縮URL:

2014年12月15日 WEB制作系 コード・プラグイン animationjQuery