[JS] アニメーションの基礎

タグ :

jQuery の勉強をまとめるシリーズです。
今回はアニメーションの基礎的なメソッドについてまとめます。

ページ内で動きをフルに活用したいなら、アニメーションが不可欠です。
要素を非表示にしたり、表示したり、移動したりする動作を多少の時間を掛けて行うことができます。ある要素をパッと表示させるのではなく、じわっと表示させたい場合などには、このアニメーションを使用すると簡単です。

今回はメインメニューからサブメニューを表示するアニメーションを作成ということで、基礎的なアニメーションのメソッドを使用します。

表示・非表示

ページロード時には非表示にしてある要素をゆっくりと表示させる処理になります。また、表示してある要素をゆっくりと非表示にさせる処理も同じような形式となります。

[ 構文 ]
.show(スピード, コールバック関数)
.hide(スピード, コールバック関数)
[ コード ]
$(function() {
	$('.menu ul li').hover(
		function() {
			var txt = $('span',this).text();
			$('>ul',this).show(500, function() {
				$('p.message').text(txt + "を展開中");
			});
			$(this).css('background','red');
		},
		function() {
			$('>ul',this).hide(300, function() {
				$('p.message').text("非表示");
			});
			$(this).css('background','#aaa');
		}
	);
});

3行目〜9行目でメインメニューのマウスオーバー時にサブメニューを表示させる処理になります。
10行目〜15行目がメインメニューのマウスアウト時にサブメニューを非表示にする処理になります。

<h4>アニメーション基礎 - 表示</h4>
<p class="message">非表示</p>
<div class="menu">
	<ul class="main">
		<li><span>メニュー1</span>
			<ul>
				<li>サブ1</li><li>サブ2</li>
			</ul>
		</li>
		<li><span>メニュー2</span>
			<ul>
				<li>サブ3</li><li>サブ4</li><li>サブ5</li>
			</ul>
		</li>
		<li><span>メニュー3</span>
			<ul>
				<li>サブ6</li><li>サブ7</li>
			</ul>
		</li>
	</ul>
</div>

5,10,15行目の li 要素がメインメニューの項目になります。
7,12,17行目の li 要素がサブメニューの項目になります。

p.message {
	margin-left: 50px;
}
div.menu ul li {
	list-style: none;
	width: 100px;
	height: 30px;
	float: left;
	cursor: pointer;
	background: #aaa;
	padding: 10px 0px 0px 25px;
}
div.menu ul li ul {
	margin-top: 5px;
	margin-left: -65px;
	display: none;
}

16行目でサブメニュー部分を非表示にしています。

<ul style="display: block;">

HTML の 6,11,16行目のスタイルが上記のように変更されます。

ページロード時はメインメニューのみが表示され、サブメニューは非表示にしています。
メインメニューへのマウスオーバーにより各メニューに対応したサブメニューが表示されます。その表示時の動作をアニメーションを用いて表示させています。
メニュー領域からのマウスアウトによりサブメニューが非表示になります。表示と同じようにアニメーションにて消えます。
また、コールバック関数には先頭のテキストを現在マウスオーバー中のメニュー名を含む文字列に変更します。マウスアウトになると初期表示に戻るようにしています。
スタイルを変更する箇所については過去記事でやっているので割愛します。

表示時の引数の「スピード」はちょい遅め(0.5秒)に設定してあります。非表示時はちょい早め(0.3秒)にすることでプレビューのような動作になります。
動作確認してみて分かると思いますが、高速に表示・非表示を繰り返したりすると、表示の時間と非表示の時間がぐちゃぐちゃになってしまい、ちらちらとバグのような動作になってしまいます。さらにコールバック関数にて先頭のテキストを変更させていますが、高速操作後のテキスト表示は高確率でバグります。。。
高速操作への対処法としては、表示する前に動作中の処理を中止させてから表示処理を行うのがてっとり早いと思います。今回はやりませんが。。。

その他のアニメーション

show() メソッドの他にも表示・非表示させるためのアニメーションパターンとして様々なものがあります。プレビューでの表示が「何か違うなー」と思う方はその他にも表示パターンがあるので参考にしてみてください。コードは同じものを使用し、アニメーション部分だけを変更したものを以下にまとめてみます。

フェードイン・フェードアウト

[ 構文 ]
.fadeIn(スピード, コールバック関数)
.fadeOut(スピード, コールバック関数)
[ コード ]
$(function() {
	$('.menu ul li').hover(
		function() {
			var txt = $('span',this).text();
			$('>ul',this).fadeIn(500, function() {
				$('p.message').text(txt + "を展開中");
			});
			$(this).css('background','red');
		},
		function() {
			$('>ul',this).fadeOut(300, function() {
				$('p.message').text("非表示");
			});
			$(this).css('background','#aaa');
		}
	);
});

3行目〜9行目でメインメニューのマウスオーバー時にサブメニューを表示させる処理になります。
10行目〜15行目がメインメニューのマウスアウト時にサブメニューを非表示にする処理になります。

<h4>アニメーション基礎 - フェードイン・フェードアウト</h4>
<p class="message">非表示</p>
<div class="menu">
	<ul class="main">
		<li><span>メニュー1</span>
			<ul>
				<li>サブ1</li><li>サブ2</li>
			</ul>
		</li>
		<li><span>メニュー2</span>
			<ul>
				<li>サブ3</li><li>サブ4</li><li>サブ5</li>
			</ul>
		</li>
		<li><span>メニュー3</span>
			<ul>
				<li>サブ6</li><li>サブ7</li>
			</ul>
		</li>
	</ul>
</div>

5,10,15行目の li 要素がメインメニューの項目になります。
7,12,17行目の li 要素がサブメニューの項目になります。

p.message {
	margin-left: 50px;
}
div.menu ul li {
	list-style: none;
	width: 100px;
	height: 30px;
	float: left;
	cursor: pointer;
	background: #aaa;
	padding: 10px 0px 0px 25px;
}
div.menu ul li ul {
	margin-top: 5px;
	margin-left: -65px;
	display: none;
}

16行目でサブメニュー部分を非表示にしています。

<ul style="display: block;">

HTML の 6,11,16行目のスタイルが上記のように変更されます。

全体的にじわっと表示され、じわっと消えていくのがフェードです。
show() と違って、端から表示されていく訳ではなく、全体の透明度を可変させて徐々に表示させる方法です。「ゆったり」とか「ほわっ」とした動作を行いたい場合には使えるかもしれません。

スライド

[ 構文 ]
.slideDown(スピード, コールバック関数)
.slideUp(スピード, コールバック関数)
[ コード ]
$(function() {
	$('.menu ul li').hover(
		function() {
			var txt = $('span',this).text();
			$('>ul',this).slideDown(500, function() {
				$('p.message').text(txt + "を展開中");
			});
			$(this).css('background','red');
		},
		function() {
			$('>ul',this).slideUp(300, function() {
				$('p.message').text("非表示");
			});
			$(this).css('background','#aaa');
		}
	);
});

3行目〜9行目でメインメニューのマウスオーバー時にサブメニューを表示させる処理になります。
10行目〜15行目がメインメニューのマウスアウト時にサブメニューを非表示にする処理になります。

<h4>アニメーション基礎 - スライド</h4>
<p class="message">非表示</p>
<div class="menu">
	<ul class="main">
		<li><span>メニュー1</span>
			<ul>
				<li>サブ1</li><li>サブ2</li>
			</ul>
		</li>
		<li><span>メニュー2</span>
			<ul>
				<li>サブ3</li><li>サブ4</li><li>サブ5</li>
			</ul>
		</li>
		<li><span>メニュー3</span>
			<ul>
				<li>サブ6</li><li>サブ7</li>
			</ul>
		</li>
	</ul>
</div>

5,10,15行目の li 要素がメインメニューの項目になります。
7,12,17行目の li 要素がサブメニューの項目になります。

p.message {
	margin-left: 50px;
}
div.menu ul li {
	list-style: none;
	width: 100px;
	height: 30px;
	float: left;
	cursor: pointer;
	background: #aaa;
	padding: 10px 0px 0px 25px;
}
div.menu ul li ul {
	margin-top: 5px;
	margin-left: -65px;
	display: none;
}

16行目でサブメニュー部分を非表示にしています。

<ul style="display: block;">

HTML の 6,11,16行目のスタイルが上記のように変更されます。

上からスーっと表示させていくのがスライドです。非表示時には逆に下からスーっと消えていきます。
サンプルのような横向きに配置したメニューの場合は、この動作が一番しっくり来るのではないでしょうか。

まとめ

今回まとめたのは最も基本的なアニメーションです。ですが、このアニメーションを駆使して複雑な動作を演出させることは可能です。頑張って作り込みをしてみたいと思います。

まとめていて気づいた事ですが、アニメーション動作は作成者のセンスが問われる内容であるということです。ページの雰囲気などにも左右されると思いますが、誰もがカッコイイとかカワイイと思う動作を作成するには難しいと思います。無難に作るというのは簡単だと思いますが、それでは面白くないページになってしまいがちです。その辺の掛け合いが非常に難しいですね。

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed