<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
$("#btn1").on( "click", function(){
$("#img").animate({ width: "10%" })
});
$("#btn2").on( "click", function(){
$("#img").animate({ width: "50%" })
});
});
</script>
</head>
<body>
<img id="img" src="https://winofsql.jp/sozai/g/night-city-light.jpg" style="width:50%">
<br>
<input id="btn1" name="btn" type="button" value="縮小">
<input id="btn2" name="btn" type="button" value="拡大">
</body>
</html>
リアルタイムHTML で実行しながら作成します1) テキストエリアにカーソルを置いて jQuery ボタン 2) 改行して SCRIPT ボタン 3) SCRIPT 要素内にカーソルを置いて onload ボタンボタンを作成4) function の {} 部分を開いてコードを書けるようにする
1) 縮小と入力して選択 2) button-1 をクリックボタンのイベントを作成3) メッセーシジボックス内の btn を btn1 に変更して OK
4) 同様に拡大ボタンを btn2 で作成
1) btn1 をコピー&ペーストして、処理部に貼り付けて選択 2) $("#") ボタンをクリック3) カーソルを右横に置いて、.on ボタンをクリック
4) そのまま OK
5) function の {} 部分を開いてコードを書けるようにする
