読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

アニメーション

fadeIn/fadeOut

jQueryObject.fadeIn();
jQueryObject.fadeOut();


《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" href="styles.css">
<script src="js/jquery-2.2.3.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="container"><div id="div1">fadeIn example.</div></div>
<div class="container"><div id="div2">fadeOut example.</div></div>
</body>
</html>


《style.css

body{ font-size:3em; }
.container{ height:120px; }
#div1{ background:pink; display:none; }
#div2{ background:yellow; display:block; }


《script.js》

$(function(){
	$('#div1').fadeIn();
	$('#div2').fadeOut();
});
スピードの指定
jQueryObject.fadeIn(1000);
jQueryObject.fadeIn('slow');
jQueryObject.fadeIn('fast');
  • 数値は「ミリ秒:1/1000秒」
  • 何もしてしない場合、400ミリ秒で動きます
アニメーション終了時にJavaScriptを実行させる
jQueryObject.fadeIn(400, function(){
	alert('フェードイン完了');
});
  • ()のなかの1番目の要素にはスピードが入ります
  • カンマで区切り、2番目に「function(){}」を入れます

slideDown/slideUp

jQueryObject.slideDown();
jQueryObject.slideUp();


《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" href="styles.css">
<script src="js/jquery-2.2.3.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="container"><div id="div1">slideDown example.</div></div>
<div class="container"><div id="div2">slideUp example.</div></div>
</body>
</html>


《style.css

body{ font-size:3em; }
.container{ height:120px; }
#div1{ background:pink; display:none; }
#div2{ background:yellow; display:block; }


《script.js》

$(function(){
	$('#div1').slideDown();
	$('#div2').slideUp();
});
スピードの指定
jQueryObject.slideDown(1000);
jQueryObject.slideDown('slow');
jQueryObject.slideDown('fast');
  • 数値は「ミリ秒:1/1000秒」
  • 何もしてしない場合、400ミリ秒で動きます
アニメーション終了時にJavaScriptを実行させる
jQueryObject.slideDown(400, function(){
	alert('スライドダウン完了');
});
  • ()のなかの1番目の要素にはスピードが入ります
  • カンマで区切り、2番目に「function(){}」を入れます

animate

jQueryObject.animate({
	プロパティ名:値;
});


《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" href="styles.css">
<script src="js/jquery-2.2.3.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id="div1">box</div>
</body>
</html>


《style.css

#div1{
	background:#8ceb63;
	position:absolute;
	top:0;
	left:0;
	padding:50px;
}


《script.js》

$(function(){
	$('#div1').animate({
		top: 200,
		left: 400
	});
});
スピードの指定
jQueryObject.animate({
	top: 200,
	left: 400
}, 1000);
アニメーション終了時にJavaScriptを実行させる
jQueryObject.animate({
	top: 200,
	left: 400
}, 400, function(){
	alert('アニメーション完了');
});



アニメーションを採用する大きな利点は、ユーザーが画面で何が起こっているのかをすぐに判断できることです。