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

jQuery-animation
このエントリーをはてなブックマークに追加
PR

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

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)