jquery.easing.jsの使用方法メモ

jQueryのアニメーションに変化をつける「easing」を拡張するプラグイン「jquery.easing.js」の使い方をメモ。

swing/linear

まずはjquery.easing.jsを使わない場合を確認してみます。
jQueryではswingとlinearの2種類のイージングがデフォルトで用意されています。

HTML

<div class="section">
	<p>swing</p>
	<div id="box01" class="box"></div>
</div>
<div class="section">
	<p>linear</p>
	<div id="box02" class="box"></div>
</div>

CSS

.section {
	position: relative;
	width: 600px;
}
.box {
	position: absolute;
	top: 25px;
	left: 0;
	width: 30px;
	height: 30px;
	background: #999;
}

JavaScript

$(function() {
	$(document).on('click', '#start', function() {
		easingTest($('#box01'), 'swing');
		easingTest($('#box02'), 'linear');
	});
});

// easingテスト用の関数
function easingTest(element, easing) {
	element.animate({
		left: 570
	}, 1000, easing).delay(100).animate({
		left: 0
	}, 1000, easing);
}

animate()などでeasingを設定しなかった場合の初期値がswingで、linearは一定速度でのアニメーションになります。
swing/linearのデモページ
　

easeIn/easeOut/easeInOut

jquery.easing.jsで拡張されるeasingは大きく分けて3種類あり、easeIn○○やeaseOut○○など、先頭に付く文字列によって変化のタイミングが変わります。

HTML

<div class="section">
	<p>easeInQuad</p>
	<div id="box01" class="box"></div>
</div>
<div class="section">
	<p>easeOutQuad</p>
	<div id="box02" class="box"></div>
</div>
<div class="section">
	<p>easeInOutQuad</p>
	<div id="box03" class="box"></div>
</div>

JavaScript

$(function() {
	$(document).on('click', '#start', function() {
		easingTest($('#box01'), 'easeInQuad');
		easingTest($('#box02'), 'easeOutQuad');
		easingTest($('#box03'), 'easeInOutQuad');
	});
});

// easingテスト用の関数
function easingTest(element, easing) {
	element.animate({
		left: 570
	}, 1000, easing).delay(100).animate({
		left: 0
	}, 1000, easing);
}

easeIn/easeOut/easeInOutのデモページ
　

Quad/Cubic/Quart/Quint

Quad/Cubic/Quart/Quintは動きは似ていますが、Quad < Cubic < Quart < Quint の順で変化の度合いが大きくなります。

HTML

<div class="section">
	<p>easeOutQuad</p>
	<div id="box01" class="box"></div>
</div>
<div class="section">
	<p>easeOutCubic</p>
	<div id="box02" class="box"></div>
</div>
<div class="section">
	<p>easeOutQuart</p>
	<div id="box03" class="box"></div>
</div>
<div class="section">
	<p>easeOutQuint</p>
	<div id="box04" class="box"></div>
</div>

JavaScript

$(function() {
	$(document).on('click', '#start', function() {
		easingTest($('#box01'), 'easeOutQuad');
		easingTest($('#box02'), 'easeOutCubic');
		easingTest($('#box03'), 'easeOutQuart');
		easingTest($('#box04'), 'easeOutQuint');
	});
});

// easingテスト用の関数
function easingTest(element, easing) {
	element.animate({
		left: 570
	}, 1000, easing).delay(100).animate({
		left: 0
	}, 1000, easing);
}

Quad/Cubic/Quart/Quintのデモページ
　

Sine/Expo/Circ

Sine/Expo/Circに関しては動きを説明しにくいので、デモページをご確認ください。

HTML

<div class="section">
	<p>easeOutSine</p>
	<div id="box01" class="box"></div>
</div>
<div class="section">
	<p>easeOutExpo</p>
	<div id="box02" class="box"></div>
</div>
<div class="section">
	<p>easeOutCirc</p>
	<div id="box03" class="box"></div>
</div>

JavaScript

$(function() {
	$(document).on('click', '#start', function() {
		easingTest($('#box01'), 'easeOutSine');
		easingTest($('#box02'), 'easeOutExpo');
		easingTest($('#box03'), 'easeOutCirc');
	});
});

// easingテスト用の関数
function easingTest(element, easing) {
	element.animate({
		left: 570
	}, 1000, easing).delay(100).animate({
		left: 0
	}, 1000, easing);
}

Sine/Expo/Circのデモページ
　

Back/Elastic/Bounce

Back/Elastic/Bounceは少し特殊な動きで、終点を少し通り過ぎてから戻ったり、バウンドっぽい動きをすることができます。

HTML

<div class="section">
	<p>easeOutBack</p>
	<div id="box01" class="box"></div>
</div>
<div class="section">
	<p>easeOutElastic</p>
	<div id="box02" class="box"></div>
</div>
<div class="section">
	<p>easeOutBounce</p>
	<div id="box03" class="box"></div>
</div>

JavaScript

$(function() {
	$(document).on('click', '#start', function() {
		easingTest($('#box01'), 'easeOutBack');
		easingTest($('#box02'), 'easeOutElastic');
		easingTest($('#box03'), 'easeOutBounce');
	});
});

// easingテスト用の関数
function easingTest(element, easing) {
	element.animate({
		left: 570
	}, 1000, easing).delay(100).animate({
		left: 0
	}, 1000, easing);
}

Back/Elastic/Bounceのデモページ
　

easingを個別でなく比較して見たかったので、動き比較用のデモページを作成しました。
よければ参考にしてください。
　

【参考サイト】

• これだけは抑えておきたい！ jQuery や CSS の「イージング」の基礎知識 | KAYAC DESIGNER’S BLOG – デザインやマークアップの話
• jQuery Easing – jQuery 日本語リファレンス