Webデザインのこと、いろいろ

Webデザインにまつわることを自分用にメモしています。

jQuery:onclickイベント：アニメーション：toggleClassとslideToggle

jQuery アニメーション

★CSS3とjQueryでのアニメーションの使い分け
　極力CSSでアニメーションさせる

★hoverでは無く、jQueryのclickイベントを使ってtransformを適用させる練習
　toggleClass
　：指定したCSSクラスが要素に無ければ追加し、あれば削除する。

アニメーション１：完成版にリンク
f:id:sankoblog:20160406004424p:plain
f:id:sankoblog:20160406004820p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アニメーション１</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
	$('.top').on('click',function(){  //div.boxをクリックしたら
		$(this).toggleClass('red');  //div.boxにクラス名redが追加される
	});
	$('.mid').on('click',function(){  //div.boxをクリックしたら
		$(this).toggleClass('rotate');  //div.boxにクラス名rorateが追加される
	});
	$('.btm').on('click',function(){  //div.boxをクリックしたら
		$(this).toggleClass('scale');  //div.boxにクラス名scaleが追加される
	});
});</script>
<style>
#container {
	width: 200px;
	margin: 30px auto;
}
.box {
	cursor: pointer;
	width: 200px;
	height: 200px;
	margin: 10px;
}
p {
	font-weight: bold;
	text-align: center;
	padding-top: 20px;
}
/*--------------------------*/
.top {
	background: #CCC;
	transition: 1.5s;
}
/*--------------------------*/
.mid {
	background: #9CC;
	transition: 1s;
}
/*--------------------------*/
.btm {
	background: #FC9;
	transition: 1s;
}
/*--------------------------*/
/*jQueryで変化するもの１*/
.red {
	background: #F00;
	transform: translate(200px,0);
	/*translate(  X軸方向の距離,  Y軸方向の距離  );*/
}
/*--------------------------*/
/*jQueryで変化するもの２*/
.rotate {
	transform: rotate(45deg);
	/*rotate( 角度deg  );*/
}
/*--------------------------*/
/*jQueryで変化するもの３*/
.scale {
	transform: scale(1.5,1.5);
	/*scale(  X軸方向の距離,  Y軸方向の距離  );*/
}
</style>
</head>

<body>
<div id="container">
<div class="box top">右に200px移動</div>
<div class="box mid">45度回転</div>
<div class="box btm">1.5倍に拡大</div>
</div><!--#container-->
</body>
</html>

★slideToggle
　：各要素の高さを操作して、slideDown/slideUpの動作を交互に行います。
　　アニメーション効果は指定したスピードで実行されます。
　　速度は、”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。

　　例えば”1500”であれば、1.5秒かけてアニメーションが行われます。
　　省略された場合は、”normal”が用いられます。

アニメーション２：完成版にリンク
f:id:sankoblog:20160406004853p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アニメーション２</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
	$('.box').on('click',function(){  //div.boxをクリックしたら
		$('.menu').slideToggle(200);  //div.boxにクラス名redが追加される
		//display: block; と display: none; が切り替わっている
	});
});
</script>
<style>
/*reset*/
html,body,ul,li,div,p {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}
body {
	font-size: 16px;
	background: #FFF url(img/back.jpg);
	}
a { text-decoration: none; }
ul { list-style: none; }
/*----------------------------------*/
.box {
	cursor: pointer;
	width: 200px;
	height: 200px;
	background: #999;
	}
/*--------------------------*/
/*jQueryで変化するもの１*/
.menu {
	display: none;  /*はじめは隠しておいて、クリックすると出てくる*/
	cursor: pointer;
	width: 200px;
	height: 200px;
	background: #CCC;
}
li {
	width: 200px;
	height: 50px;
	font-weight: bold;
	text-align: center;
}
li a {
	display: block;
	line-height: 50px;
	color: #FFF;
}
li a:hover {
	background: #3C3;
}
li a:nth-child(-n+3) {  /*3番目まで全部*/
	border-bottom: 2px solid #FFF;
}
</style>
</head>

<body>
<div id="container">
<div class="box"><p>Menu</p></div>
<div class="menu">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">枝豆一覧</a></li>
<li><a href="#">枝豆隊</a></li>
<li><a href="#">アクセス</a></li>
</ul>
</div>
</div><!--#container-->
</body>
</html>