jQuery：イージング（Easing）でアニメーション表現を高める

サンプルはこちら。

See the Pen nvlBb by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

ボタンを押すことでそれぞれのイージングタイプに応じた動作を上のバーに反映させます。

動作自体はいずれも「バーの幅を50pxにし、また200pxに戻す」だけですが、イージングの種類によって動きが大きく異なります。

JavaScript

$("input").click(function(){
  var es = $(this).attr("value");
  $(".box").html(es);
  $(".box").animate({
    width: "50px"
  }, "slow", es);
  $(".box").animate({
    width: "200px"
  }, "slow", es);
});

いずれかの<input>がクリックされたら、その<input>内のvalueの値をイージング名として抜き出し、jQueryの「animate()」関数に投げている形です。

イージングの種類はほかにもたくさんあります。
http://jqueryui.com/resources/demos/effect/easing.html

コード自体は説明用なのでごく簡単なものですが、「イージングを意識して使い分ける」こともUIの表現を高めるための一つの要素です。やりすぎても下品になったり使いやすさも落とすことがあるので、サイトの内容やビジョン・世界観に適したものを使い分けましょう。