【jQuery】アニメーション - PCゲーマーのWebデザイン備忘録

jQueryの関数を利用して、簡単なアニメーションを表示します。

表示・非表示

$( セレクタ ).show( スピード );//表示
$( セレクタ ).hide( スピード );//非表示

アニメーションはslow、fastまたは数値（1秒=1000）で指定します。

実行例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>アニメ</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
<style>
div{
  width: 300px;
  height: 300px;
  background: pink;
  display: none;
}
</style>
</head>

<body>
<p><button id="show">表示</button></p>
<p><button id="hide">非表示</button></p>
<div></div>
<script>
$(function(){
	$('button#show').click(function(){
		$('div').show('slow')
});
$('button#hide').click(function(){
	$('div').hide('slow')
});
});
</script>

</body>
</html>

結果：

ボタンを押すたびにアニメーションで表示・非表示に切り替わります。

アニメーションを表示後に関数を実行する。

$( セレクタ ).show( スピード, コールバック関数 );

コールバック関数を指定することで、アニメーションを表示した後に別の処理を実行できます。

実行例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>アニメ</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
<style>
div{
  width: 300px;
  height: 300px;
  background: pink;
  display: none;
}
</style>
</head>

<body>
<p><button id="show">表示</button></p>
<div></div>
<script>
$(function(){
$('button').click(function(){
$('div').show('slow',function(){
$(this).css('background','skyblue');
});
});
});

</script>

</body>
</html>

結果：

ピンクぼボックスがアニメーション表示後、青になります。

Toggle

toggle();で表示・非表示が簡単にできます。
また「animated」を使うことで、実行中のアニメーションの処理が終わるまで、他の処理が行われないように制御できます。

実行例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>アニメ</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
<style>
div{
  width: 300px;
  height: 300px;
  background: skyblue;
  display: none;
}
</style>
</head>

<body>
<p><button >表示・非表示</button></p>
<div></div>
<script>
$(function(){
$('button').click(function(){
$('div:not(:animated)').toggle('slow')
});
});
</script>

</body>
</html>

結果：

スライド

slideUp();とslideDown();で要素をスライドさせて、移動することができます。

実行例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>アニメ</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
<style>
div{
  width: 300px;
  margin: 50px auto;
}

dt{
  background: #7CADB6;
  padding: 10px;
  cursor: pointer;
}
dd{
  border: 1px solid #7CADB6;
  height: 250px;
  margin: 0;
}
</style>
</head>
<div>
<dl>
<dt>スライドして表示を切り替える</dt>
<dd>
slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。
</dd>
</dl>
</div>
<script>
$(function(){
$('dt').click(function(){
if($('dd').css('display')=='block'){
$('dd:not(:animated)').slideUp('slow');
}else{
$('dd').slideDown('slow');
}
});
});
</script>

</body>
</html>

結果：

ddのdisplayを判断材料にスライドを実行させています。

slideToggle

slideToggle();で上記の表記を簡略化させることができます。

<script>
$(function(){
$('dt').click(function(){
$('dd:not(:animated)').slideToggle('slow');
});
});
</script>

フェードイン/アウト

fadeIn();とfadeOut();でフェードイン/アウトができます。

実行例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>アニメ</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
<style>
img{
  display: none;
}
</style>
</head>

<p><button id="fadeIn">表示</button></p>
<p><button id="fadeOut">非表示</button></p>
<p><img src="../event/flower.png" alt="flower"></p>

<script>
$(function(){
$('button#fadeIn').click(function(){
	$('img:not(:animated)').fadeIn('slow');
});
$('button#fadeOut').click(function(){
	$('img:not(:animated)').fadeOut('slow');
});
});
</script>

</body>
</html>

結果：
GIFで見る

ボタンを押すと、徐々に画像が変わります。

Opacityを指定する

Opacityを指定して、半透明にすることができます。

実行例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>アニメ</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
<style>
img{
  display: none;
}
</style>
</head>

<p><button id="fade100">表示</button></p>
<p><button id="fade50">半透明</button></p>
<p><button id="fade0">非表示</button></p>
<p><img src="../event/flower.png" alt="flower"></p>

<script>
$(function(){
$('button#fade100').click(function(){
	$('img:not(:animated)').fadeTo('slow',1);
});
$('button#fade50').click(function(){
	$('img:not(:animated)').fadeTo('slow',0.5);
});
$('button#fade0').click(function(){
	$('img:not(:animated)').fadeTo('slow',0);
});
});
</script>

</body>
</html>

結果：
GIFで見る

「半透明」を押したときに半透明になります。

スライド移動する

実行する関数にswingを追加することで、画像をスライド移動させることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>fadeIn() / fadeOut()</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
p {
  width:400px;
  height:534px; /* 高さを2倍指定 */
  margin:0;
  cursor: pointer;
}
div {
  width:400px;
  height:267px; /* 画像1枚の大きさ */
  overflow:hidden;
}
</style>
</head>

<div>
<p><img src="../event/flower.png" alt="flower" id="flower"><img src="../event/building.png" alt="building" id="building"></p>
</div>

<script>
$(function(){
$('#flower').click(function(){
	$('p:not(:animated)').animate({
		marginTop: '-267px'},'slow','swing');//クリックしたときにmarginTopが-267px
});
$('#building').click(function(){
	$('p:not(:animated)').animate({
		marginTop: '0'},'slow','swing');//クリックしたときにmarginTopが0px
});
});
</script>

</body>
</html>

結果：
GIFで見る

上下にスライドします。swingで移動させることによって、div要素内に表示されてないところを見せるといった構図です。