web制作勉強中です。

職業訓練校でweb制作を勉強しています。勉強のメモなど記録します。

【授業メモ】jQuery アニメーションで動きをつける

復習
★イベントが発生した要素を取得するthis
attrはアトリビュート 属性のこと
属性とは、要素の中に含まれるもの pには属性はない imgの属性はsrcとalt二つある aはhrefが属性
 
下記の指示は、「四つあるうちのどれかのaをクリックしたら、imgのsrcが、クリックされたaのhrefの値に変わり、imgのaltクリックされたaのテキストが入る」というもの
 
・ここでいうthisはa html内にaは四つあるが、クリックしたアンカーすなわちイベントを仕掛けている要素がthisということになる
・後半の.attrの書き方は「メソッドチェーン」 同じimgに命令するので何度も $('img')を書かずに省略してドットで命令をつなげている
・return falseは、アンカーの持つリンクの飛んで行っちゃう機能を消すもの アンカーにイベントを設定するときは必ずセットで設定するもの
 
<script>
$(function(){
$('a').on('click', function(){
$('img').attr('src',$(this).attr('href')).attr('alt',$(this).text());
return false;
});
});
</script>
</head>
 
<body>
<p><a href="img/spring.jpg">春</a></p>
<p><a href="img/summer.jpg">夏</a></p>
<p><a href="img/autom.jpg">秋</a></p>
<p><a href="img/winter.jpg">冬</a></p>
<p><img src="img/spring.jpg" alt="春"></p>
</body>
 
 
 
アニメーション効果で動きをつける
display:none;をdisplay:block;にする show()
cssでdisplay:none;をdisplay:block;にするのと同じ動きをさせる事ができる
<style>
#box {
  width: 300px;
  height: 300px;
  background: orange;
  display: none;  ←buttonをclickすると、cssのここがdisplay:block;に変わる!
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('button').on('click',function(){
$('#box').show();
});
});
</script>
 
 
★show()の中には、以下の二種類の方法で速度指定が入れられる
  • キーワード slow fastを入れる テキストなので’’で囲うこと
.show('slow');
 
  • ミリ秒を入れる 1000ミリ秒=1秒
.show(1000);
 
 
★display:none;にするhide()
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#show').on('click',function(){
$('#box').show(1000);
});
$('#hide').on('click',function(){
$('#box').hide('slow');
});
});
</script>
 
 
★「ある処理が終わったら、この処理をしてほしい」コールバック関数
記述例)#boxが1000ミリ秒かけて出現してから、色が変わるという設定
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#show').on('click',function(){  ←こっちが先
$('#box').show(1000,function(){    ←次にこれ
$(this).css('background','green');//ここのthisは#box
});
});
$('#hide').on('click',function(){
$('#box').hide('slow');
});
});
</script>
 
 
 
★:not(:animaited)でアニメーションがとまらなくなることを制限する
<script>
$(function(){
$('#show').on('click',function(){
$('#box:not(animated)').show(1000,function(){
$(this).css('background','green');//ここのthisは#box
});
});
$('#hide').on('click',function(){
$('#box:not(:animated)').hide('slow');
});
});
</script>
 
 
★表示非表示を切り替えるtoggle
表示されているときは非表示に、非表示の時は表示にと切り替える ※あまりもう使わないらしい
<script>
$(function(){
$('button').on('click',function(){
$('#box:not(animated)').toggle(500);
});
 
});
</script>
 
★表示非表示をスライドで切り替えるslideDown() slideUp()
show/hideで表示させる場合は左上の00地点から表示が始まってからcssで指定されている大きさになる
slideで表示させる場合はcssで指定した横幅だけ確保された状態から徐々に指定した高さになるように表示が始まる
ナビゲーションメニューなど、文字などの中身が入っているものを表示させる場合はslideが適している
 
★ひとつのボタンで表示非表示をまかなう slideToggle
<script>
$(function(){
$('#toggle').on('click',function(){
$('#box:not(animated)').toggle(500);
});
});
$(function(){
$('#slide').on('click',function(){
$('#box2:not(:animated)').slideToggle(500);
});
});
</script>
 
★フェードインフェードアウト
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#in').on('click',function(){
$('img').fadeIn(800);
});
});
$(function(){
$('#out').on('click',function(){
$('img').fadeOut(800);
});
});
</script>
 
 
まとめ
  • フェードインは opacityが1になる /フェードアウトは0になる
  • slideはwidthは元から指定された値で、heightが指定地まで動いていく
  • show/hideはwidthとheight両方が指定した値になるために動いていく
 
練習:ボタンをクリックしたらナビゲーションが表示されるようにする
jQueryはなるべく要素名ではなくidをつけてid名で指定する
・scriptはcssの下に書く
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボタンを押したらメニューボタンが表示されるようにする</title>
<style>
html,body,div,nav,ul,li,a {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
 
#container {
  margin: 50px auto;
  width: 200px;
}
#menu {
  width: 200px;
  display: none;
}
li {
  width: 200px;
  height: 50px;
}
li a {
  border: 1px solid orange;
  box-sizing: border-box;
  display: block;
  text-align: center;
  line-height: 50px;
  background:#F9FDAC;
  color: orange;
}
 
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#btn').on('click',function(){
$('#menu:not(:animated)').slideToggle(800);
});
});
</script>
</head>
 
<body>
<div id="container">
<button id="btn">メニュー</button>
<nav id="menu">
<ul>
<li><a href="#">ボタン1</a></li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
<li><a href="#">ボタン4</a></li>
</ul>
</nav>
</div>
</body>
</html>