5月23日授業内容(jQueryの復習（アコーディオンパネル②）)

最初の表示
f:id:paris1204:20160523184416p:plain


dtを押した後の表示
f:id:paris1204:20160523184427p:plain

<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>アコーディオンメニュー</title>
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
	$('dl.news>dd:not(:first)').hide();
	$('dl.news>dt:not(:first)').addClass('open').css('background','olive').css('color','black');

	$('dt').on('click',function(){
		$('dt').removeClass();
		$(this).addClass('open');
		$('dt').css('background','olive').css('color','black');
				$(this).css('background','black').css('color','white');
		if($(this).next().css('display')=='none'){
			$('dd').slideUp();
			$(this).next().slideDown();
			}//if文の表示
		});//クリックイベントのタグ
	});

</script>


<style>
/*reset*/
html,body,dl,dt,dd{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
margin:0;
padding:0;
line:height;}

ul,li{list-style:none;}

a{text-decoration:none;}

dl{width:500px;
margin:20px auto;}
dt{text-align:center;
background:black;
color:white;
}

dd{height:100px;
border-left:olive solid 1px;
border-right:olive solid 1px;
border-bottom:olive solid 1px;
}


</style>
</head>


<body>
<dl class="news">
<dt>カテゴリA</dt>
<dd>内容がここに入る</dd>
<dt>カテゴリB</dt>
<dd>内容がここに入る</dd>
<dt>カテゴリC</dt>
<dd>内容がここに入る</dd>
<dt>カテゴリD</dt>
<dd>内容がここに入る</dd>

</dl>
</body>
</html>

減速スライド
web-design-lesson.hatenablog.jp
f:id:paris1204:20160523185221p:plain

↓

f:id:paris1204:20160523185241p:plain

<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>減速スライダー</title>
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
	$('#s01').on('click',function(){
$('p:not(:animated)').animate({marginLeft:'-400px'},'slow','swing');
});//#s01

$('#s02').on('click',function(){
$('p:not(:animated)').animate({marginLeft:'-800px'},'slow','swing');
});//#s02

$('#s03').on('click',function(){
$('p:not(:animated)').animate({marginLeft:'-1200px'},'slow','swing');
});//#s03

$('#s04').on('click',function(){
$('p:not(:animated)').animate({marginLeft:'0'},'slow','swing');
});//#s04
});
	

</script>


<style>
/*reset*/
html,body,p{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
margin:0;
padding:0;
line:height;}

div#surf{width:400px;
height:400px;
margin:50px auto;
overflow:hidden;}
p{width:1600px;}


</style>
</head>

<div id="surf">
<p><img id="s01" src="img/s01.png" alt="#"><img id="s02" src="img/s02.png" alt="#"><img id="s03" src="img/s03.png" alt="#"><img id="s04" src="img/s04.png" alt="#"></p>


</div><!--#surf-->


<body>

</body>
</html>


ボタン（hover）
f:id:paris1204:20160523185425p:plain
↓
f:id:paris1204:20160523185437p:plain
↓
f:id:paris1204:20160523185425p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate( )メソッドを利用したボタン</title>
<style>
html, body, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a { text-decoration: none; }

#wrapper {
  width: 960px;
  margin: 50px auto;
  text-align: center;
}
.fadeBtn {
  width: 200px;
  height: 70px;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  line-height: 70px;
  text-align: center;
  display: inline-block;
  overflow: hidden;
  background: #ddd;
  border: #fff 2px solid;
  border-radius: 5px;
  box-shadow: 0 0 3px #555;
}
</style>
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
  
  $('.fadeBtn').hover( function() {
    $(this).stop().animate( { opacity: '0.5', fontSize: '22px' }, 300 ); 
  }, function() {
    $(this).stop().animate( { opacity: '1.0', fontSize: '18px' }, 300 );
  });
  
});
</script>
</head>
<body>
<div id="wrapper">
<p><a href="#" class="fadeBtn">BUTTON</a></p>
</div><!-- /#wrapper -->
</body>
</html>


ボタン２（hover）



f:id:paris1204:20160523185637p:plain

↓

f:id:paris1204:20160523185652p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate( )メソッドを利用したボタン</title>
<style>
html, body, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a { text-decoration: none; }

#wrapper {
  width: 960px;
  margin: 50px auto;
  text-align: center;
}
.cssAnim {
  padding: 15px 0;
  width: 150px;
  color: #000;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  overflow: hidden;
  background-color: #cfcfcf;
  border: #999 1px solid;
  transition: all 0.3s linear;
}
.bgColor {
  color: #fff;
  background-color: #000;
}
</style>
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
  
  $('.cssAnim').hover( function() {
    $(this).addClass( 'bgColor' ); 
  }, function() {
    $(this).removeClass( 'bgColor' );
  });
  
});
</script>
</head>
<body>
<div id="wrapper">
<p><a href="#" class="cssAnim">BUTTON</a></p>
</div><!-- /#wrapper -->
</body>
</html>