クリックしたらアニメーションする：
animate()
アニメーションさせるメソッド
2つめの引数で「出来上がりの姿」を指定する
$(function(){
$("#btn").on('click',function(){
$('#d1').css('opacity',0.5);
$('#d2').animate({//最後どうなっていたいかを2つめの引数で指定
'width':'1px',//うんと小さくする
'height':'1px'
});
});
});
ちなみにanimate()には第4引数まである (自習)
対象要素.animate( CSSプロパティ, duration, easing, 関数 )
>一番重要なのが第1引数に指定する「CSSプロパティ」で、それ以外は省略することが可能です。また、CSSプロパティはオブジェクト形式で記述する必要があります。
例えば、「font-size」であれば「{fontSize: 40}」のようにキャメルケースに置き換えて設定します。その他の引数に関しても、本記事で詳しく解説していきますので参考にしてみてください！
>「duration」は、ミリ秒で指定するようになっており、アニメーションが完了するまでの時間を設定できます。
「easing」は、アニメーションの挙動を指定可能で、「linear」と「swing」の2種類を文字列で設定します。
>「animate()」の引数にはコールバック関数を設定することができるので合わせてご紹介しておきます！
基本的な使い方としては、animate()の第4引数にそのまま関数を指定する方法です。
$('h1').animate({fontSize: 80}, 2000, 'linear', function() {
console.log('アニメーションが実行されました！');
});
この例では、アニメーションが実行されたあとすぐに関数内に記述された処理が実行されます。
JQuaryの利点：
JQuaryは、ブラウザ（レンダリングエンジン）によって異なる挙動を吸収して
同じように動くので、
自分で1から作るとブラウザごとに分岐して指定しないといけない。
JQuaryを使う利点は、短くて速いだけでなく、
「各ブラウザで同じ挙動をする」というものがある。
スマホ用のJQuaryもあるので、そういうのが大変便利らしい。
座席を変える座席表の生成は金曜につくる
一応下準備
$(<li>') これが新たに要素を作るメソッドになる
（いままでのネイティブコードだとcreateElementに相当）
.append これはいままでのappendChildに相当
--->test3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test3</title>
<link rel="stylesheet" href="test3.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<button id="btn">click!</button>
<div id="d1">jQuary</div>
<div id="d2">a</div>
<ul id="ul1"></ul> //ここに配列の内容をリストにして追加表示
<script src="test3.js"></script>
</body>
</html>
--->test3.js
$(function(){
//予約 予約はonで行う
$("#btn").on('click',function(){
$('#d1').css('opacity',0.5);
$('#d2').animate({ //最後どうなっていたいかを引数2で指示
'width':'1px',
'height':'1px'
});
});
//読み込みと同時に実行
var langs=['Java','javaScript','PHP'];//この配列をul要素に出力したい
for (var i=0; i<3; i++){
//作ったliに配列のテキストが入る
//$('#ul1').append($('<li>').text(langs[i]));
var ele = $('<li>').text(langs[i]);
$('#ul1').append(ele);
}
});
この2つは同じこと
簡略版
$('#ul1').append($('<li>').text(langs[i])); //一気につづった。
↑
↓
2行版
var ele = $('<li>').text(langs[i]); //変数eleを作って一旦格納。
$('#ul1').append(ele);
好みでどちらでつづってもいい。
