jquery.easie.js [plug-in] [jQuery] [CSS3]

2014年に制作した記事を2015/07に加筆修正

エフェクトの動きを加速/減速させるための関数を「イージング」といいます。
jqueryではデフォルトで使えるのは、"linear"と"swing"のみですが、このプラグインを利用すると様々なイージングを利用できるようになります。
このプラグインを使うと、たとえば徐々に幅が広がるアニメーションに初めはゆっくり、中間で加速度が上がり、最後にゆっくり動くといった効果がつけられたりすることができます。
jquery.easie.jsはイージングのカスタマイズも多少可能なようです。CSS3のtransition-timing-functionやanimation-timing-functionにも使えます。
jqueryのプラグインなので、jQueryライブラリが読み込まれていることが前提です。

sample

swing - linear
easieEaseInOutQuint - customEasing
css3

バーをクリックすると動作します（3つめの緑色のバーはマウスオーバー／アウトで動作します）。

html

<div class="test">easieEaseInOutQuint - customEasing</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

このHTMLコードはあくまで例です。
幅や高さ、背景色などを必要に応じてにcssで指定します。

js

$(function() {
  $('.test').click(function(){
    $(this).animate({width: 90}, 'slow', 'easieEaseInOutQuint').animate({width: 300}, 'slow', $.easie(0.422,0.911,0.756,0));
  });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

animate以外にも使えますが、ここではanimateを例にします。
この例ではクリックしたときに動作するようにしましたが、もちろんイベントもマウスクリックに限りません。

  • セレクターに対して、アニメーション効果（幅を変えるなどの変化）をつけます。
  • slow/fastまたは完了までの時間（ミリ秒単位）といった、動作期間を設定します。
  • イージングを指定します。
    ここでは、幅が狭まるときにeasieEaseInOutQuintを、元のサイズに戻るときにカスタマイズしたイージングを設定しています。
    イージングには様々なものがあります。種類については、提供元サイトや解説サイトを参照してください。
  • 必要であればコールバック関数も追加してください。

イージングのカスタマイズについては、提供元サイトの曲線グラフのような図のオレンジ色の●をマウスでドラッグして調整すると簡単にできます。図の右側にコードが表示されるので、コピペしてください（ただし、これは2015/08現在のことなので、提供元サイトのデザインが変わるなどすれば、この限りではありません）。

css3

.test{
  height:10px;
  width:300px;
  background:#0c3;
  overflow:hidden;
  text-indent:100%;
  cursor:pointer;
  margin:10px 0;

  transition-property: background,width; /*transition効果を適用するCSSプロパティ名を指定*/
  transition-duration:0.5s; /*変化に掛かる時間を指定する*/
  transition-timing-function:easieEaseInOutQuint;/*変化のタイミング・進行割合を指定する*/
}
.board_smp .test:hover{
      width:90px;
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

上記サンプルのcssはこんな感じです。ここではtransitionを使っていますが、animationでもつかえます。

transition-timing-functionのところにeasieEaseInOutQuintといったjquery.easie.jsであらかじめ決められているイージングの値を入れます。
この部分をcubic-bezier(0.422,0.911,0.756,0)などとすると、カスタマイズしたイージングも適用できます。

transitionやanimationが使えるブラウザが今のところ限られているので、ある程度古いブラウザでも動作させたい場合は上記のjqueryの方を使ってください。

cubic-bezierはjquery.easie.jsに関係なく、普通にtransition-timing-functionプロパティやanimation-timing-functionプロパティの値の指定方法の一つです。

戻る

Top