ユーザー生放送【企画】到来！夏モテ☆コーデ(ィング)大特集HTML5+CSS3【jQuery編】No.4

2014年5月16日2020年10月10日

http://live.nicovideo.jp/watch/lv179668423

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/animation.js"></script>
<title>夏モテjQuery特集</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<button id="left">&lt;&lt;</button>
	<button id="right">&gt;&gt;</button>
	<div id="block">
		夏にモテたい
	</div>
	<div class="fade_block">
		<img src="img/natsumote2.png" width="374" height="373" />
	</div>
	<!-- / .fade_block -->
	
	<button id="animate">animate</button>
	<div class="easing_block">
		<img src="img/natsumote.png" width="160" height="160" alt="夏モテ" />
	</div><!-- / .easing_block -->
</body>
</html>

/*
</body>の直前くらいに書いてないと要素が存在する前に実行されてしまうので動かない
なので、$(document).ready(function(){ここに動作を書く});で囲っておく。
*/
$(document).ready(function(){
	//アニメーション1
	setTimeout(function(){//実行を遅らせる
		$("#go").ready(function(){
		  $("#block").animate({ 
			width: "150px",
			opacity: 0.4,
			marginLeft: "0.6in",
			fontSize: "1.5em", 
			borderWidth: "3px",
			//引数でキャメルケースで表現できるCSSのプロパティはもっとたくさんあるはず
		  }, 1500 );
		});
	},1000);
	
	//アニメーション2
	$("#right").click(function(){
	  $(".fade_block").animate({"left": "+=50px"}, "easeInOutQuart");
	});
	 
	$("#left").click(function(){
	  $(".fade_block").animate({"left": "-=50px"}, "fast");
	});
	
	//アニメーション3
	/*
	$("#animate").click(function(){
	  $(".fade_block").animate(
		{height: "toggle", opacity: "toggle"},
		"slow"
	  );
	});
	*/
	setTimeout(function(){//実行を遅らせる
	  $(".fade_block").animate(
		{
			height: "show",
			opacity: "show"
			},
		"slow"
	  );
	},1500);
	jQuery.extend(jQuery.easing,
	{
	  easeInQuart: function (x, t, b, c, d) {
		return c*(t/=d)*t*t*t + b;
	  },
	});
	
	setTimeout(function(){//実行を遅らせる
	  $(".easing_block").animate(
		{height: "show",width: "show", opacity: "show"},
		//"slow", "easeInQuart"
		{ duration: 600, easing: 'easeInCubic',}
	  );
	},1500);
	/*
	$(".easing_block").animate({
		height: "show", width: 'toggle', opacity: "show"}, { duration: 600, easing: 'easeInCubic', 
	})
	*/
});

div#block { 
  background-color:#bca; 
  width:100px; 
  border:1px solid green;
  display: none;
  position: absolute;
  z-index: 1;
}
div.fade_block {
	left: 10px;
	width: 374px;
	height: 374px;
	position: absolute;
	left: 50px;
	display: none;
	z-index: 0;
	margin: 5px;
}
div.easing_block {
	position: absolute;
	left: 50px;
	width: 160px;
	height: 160px;
	margin-top: 160px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	display: none;
	z-index: 2;
  }