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

3月17日 授業内容①(jQuery バブリング、one,slideUp,slideDown,show,hide,toggle,:not(:animated),fadeIn,fadeOut,fadeTo(コールバック関数),animate,swing)etc...

jQueryのバブリング
functionで要素セレクターとしてPやaを指定すると、他の場所にある同じ種類のセレクターーにも機能してしまうこと。
idやclassで限定して指定するとバブリングが解決できる。

www.tam-tam.co.jp

f:id:paris1204:20160317223639p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryのバブリング防止、one()</title>
<style>
ul,li{list-style:none;}
</style>
<script src="../jquery-1.12.1.min.js"></script>
<script>
$(document).ready(function(){
$('#nav a').on('click',function(){//今ulの上にaリンクがあるのでそちらにclickがファンクションしないように、ul aとしてセレクターを制限する。
	$('#mainImg img').attr('src',$(this).attr('href')).attr('alt',$(this).text());
	return false//指定している属性以外はとらないようにする設定
	});//aの閉め
	$('#flower>img').one('click',function(){//クリックしても1回だけhしかきかない
		$('#mainImg img').attr('src',$(this).attr('src')).attr('alt',$(this).attr('alt'))
		});//li imgの閉め
	
	});
</script>
</head>

<body>
<p><a href="https://www.google.co.jp/">リンクしているページに移動</a></p>
<ul id="nav">
<li id="flower"><img src="img/flower.jpg" alt="花" width="100"></li>
<li><a href="img/sea.jpg" ></a></li>
<li><a href="img/jellyfish.jpg" >くらげ</a></li>
<li><a href="img/building.jpg" >建物</a></li>
</ul>
<p id="mainImg"><img src="img/flower.jpg" alt="花"></p>
</body>
</html>

HTML/CSSを操作する
d.hatena.ne.jp

イベント

http://d.hatena.ne.jp/web-0818/20160606/p1


・toggle
f:id:paris1204:20160317225322p:plain

f:id:paris1204:20160317225339p:plain


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>クリックする度に画像が換わる</title>
<style>
ul,li{list-style:none;}
</style>
<script src="../jquery-1.12.1.min.js"></script>
<script src="../jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function(){

	
	});
</script>
</head>

<body>
<div id="container">
<p id="imgChange"><img src="img/toggle01.png" alt="01"></p>
</div>
<script>
$(function(){
$('#imgChange').toggle(//今はonイベントが主流なので最新のjQueryにはtoggleがないので使うときはjquery-migrate-1.2.1.min.jsをスクリプトに書くこと。toggleの機能はカウンター変数と同じでvar i=1,i++を条件をつけてまわしているようなもの
function(){$('img').attr('src','img/toggle02.png');},
function(){$('img').attr('src','img/toggle03.png');},
function(){$('img').attr('src','img/toggle04.png');},
function(){$('img').attr('src','img/toggle01.png');}
);
});

</script>
</body>
</html>

アニメーション効果
d.hatena.ne.jp
f:id:paris1204:20160317231501p:plain

f:id:paris1204:20160317225826p:plainf:id:paris1204:20160317225836p:plainf:id:paris1204:20160317225840p:plain
コールバック関数P127(コールバック関数とは,アニメーション処理が完了した後に続けて実行される命令のこと)

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>クリックする度に画像が換わる</title>
<style>
div#up{width:300px;
height:300px;
background-color:skyblue;
display:none;}
</style>
<script src="../jquery-1.12.1.min.js"></script>
<script src="../jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function(){
$('#hyouji button').on('click',function(){
	$('#up').show('slow',function(){
		$(this).css('background-color','olive');//コールバック関数P127(コールバック関数とは,アニメーション処理が完了した後に続けて実行される命令のこと)
		});
	});
	$('#kakusu button').on('click',function(){
		$('#up').hide('fast');
		});
	});
</script>
</head>

<body>
<p id="hyouji"><button>表示</button></p>
<p id="kakusu"><button>隠す</button></p>
<div id="up"></div>
</body>
</html>

f:id:paris1204:20160317230447p:plainf:id:paris1204:20160317230451p:plain
not:animated・・・画像を連続でクリックしてもshowの動きが最後まで終わるまで機能しないようにする。これを設定しておかないとボタンを連打した回数だけ画像が表示、非表示を繰り返すことになる。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>クリックする度に画像が換わる(not:animated・・・画像を連続でクリックしてもshowの動きが最後まで終わるまで機能しないようにする)</title>
<style>
div#up{width:300px;
height:300px;
background-color:skyblue;
display:none;}
</style>
<script src="../jquery-1.12.1.min.js"></script>

<script>
$(document).ready(function(){
$('#aaa button').click(function(){
	$('#up:not(:animated)').toggle('slow')//showとhideを合体させたような機能がtoggle
	
});
	});
</script>
</head>

<body>
<p id="aaa"><button>表示・隠す</button></p>
<div id="up"></div>
</body>
</html>

</html>


f:id:paris1204:20160317230845p:plain

f:id:paris1204:20160317230904p:plain

f:id:paris1204:20160317230845p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>クリックする度に画像が換わる(開閉パネル)</title>
<style>
dl {
  width: 300px;
  margin: 50px auto;
}
dt{
  background: #7CADB6;
  padding: 10px;
  cursor: pointer;
}
dd{
  border: 1px solid #7CADB6;
  height: 250px;
  margin: 0;
}
</style>
<script src="../jquery-1.12.1.min.js"></script>

<script>
$(function(){
  $( 'dt' ).on('click',function(){
    if($( 'dd' ).css( 'display' ) == 'block' ){//display==blockの時はddの表示がされている状態
      $( 'dd:not(:animated)').slideUp( 'slow' );
    }else{
      $( 'dd' ).slideDown( 'slow' );
    }
  });
});</script>
</head>

<body>
<dl>
<dt>スライドして表示状態を切り替える</dt>
<dd>
slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。
</dd>
</dl>
</body>
</html>

f:id:paris1204:20160317231305p:plain
クリックする度に画像が換わる(開閉パネル)(slide toggle)

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>クリックする度に画像が換わる(開閉パネル)(slide toggle)</title>
<style>
dl {
  width: 300px;
  margin: 50px auto;
}
dt{
  background: #7CADB6;
  padding: 10px;
  cursor: pointer;
}
dd{
  border: 1px solid #7CADB6;
  height: 250px;
  margin: 0;
}
</style>
<script src="../jquery-1.12.1.min.js"></script>
<script src="../jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
  $( 'dt' ).on('click',function(){
      $( 'dd:not(:animated)').slideToggle( 'slow' );

  });
});</script>
</head>

<body>
<dl>
<dt>スライドして表示状態を切り替える</dt>
<dd>
slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。
</dd>
</dl>
</body>
</html>


f:id:paris1204:20160317231637p:plain
表示状態をフェードイン・フェードアウトで切り換える

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>表示状態をフェードイン・フェードアウトで切り換える</title>
<style>
img{display:none;}
</style>
<script src="../jquery-1.12.1.min.js"></script>
<script src="../jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
	$('#fadein').on('click',function(){
		$('img').fadeIn('200');//slow=600,標準=400
		});
		$('#fadeout').on('click',function(){
		$('img').fadeOut('700');
		});
	});
</script>
</head>

<body>
<p><button id="fadein">fadeIn</button></p>
<p><button id="fadeout">fadeOut</button></p>
<p><img src="img/flower.jpg" alt="花"></p>
</body>
</html>

f:id:paris1204:20160317231826p:plain
表示状態をフェードイン・フェードアウトで切り換える(toggle)

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>表示状態をフェードイン・フェードアウトで切り換える(toggle)</title>
<style>
img{display:none;}
</style>
<script src="../jquery-1.12.1.min.js"></script>
<script src="../jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
	$('#fadeinout').on('click',function(){
		$('img:not(:animated)').fadeToggle('slow');
		});
		
	});
</script>
</head>

<body>
<p><button id="fadeinout">fadeIn/fadeOut</button></p>
<p><img src="img/flower.jpg" alt="花"></p>
</body>
</html>

f:id:paris1204:20160317232153p:plain
f:id:paris1204:20160317232203p:plain
f:id:paris1204:20160317232212p:plain
透明度を徐々に変更する

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>透明度を徐々に変更する</title>
<style>
img{display:none;}
</style>
<script src="../jquery-1.12.1.min.js"></script>
<script src="../jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
	$('#fade100').on('click',function(){
	$('img:not(:animated)').fadeTo('slow',1);
	});
	$('#fade50').on('click',function(){
	$('img:not(:animated)').fadeTo('slow',0.5);
	});
	$('#fade0').on('click',function(){
	$('img:not(:animated)').fadeTo('slow',0);
	});
	});
</script>
</head>

<body>
<button id="fade0">fade0</button>
<button id="fade50">fade50</button>
<button id="fade100">fade100</button>
<p id="fadeup"><img src="img/flower.jpg" alt="花"></p>
</body>
</html>

f:id:paris1204:20160317232525p:plainf:id:paris1204:20160317232530p:plain
独自のアニメーションを設定できる(横方向にスライド)

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<!--http://d.hatena.ne.jp/web-0818/20160607/p1
--><title>独自のアニメーションを設定できる(横方向にスライド)</title>
<style>
p {
  width:800px;
  height:267px;
  margin:0;
}
div {
  width:400px;
  height:267px;
  overflow:hidden;
}
</style>
<script src="../jquery-1.12.1.min.js"></script>
<script src="../jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
 $( '#flower' ).on('click',function(){
    $( 'p:not(:animated)' ).animate({
      marginLeft : '-400px' 
    },'400', 'swing' );//slow=600,標準=400
  });
  $( '#building' ).on('click',function(){
    $( 'p:not(:animated)' ).animate({
      marginLeft : '0' 
    }, 'slow', 'swing');
  });
	});
</script>
</head>

<body>
<div>
<p><img src="img/flower.jpg" alt="flower" id="flower"><img src="img/building.jpg" alt="building" id="building"></p>
</div>
</body>
</html>