◆20200821 授業メモ jQuery イベント・表示非表示（fadeToは要確認）・アニメーション
本日の授業内容
・昨日のjQueryのおさらい
→jQueryの書き方
スマホが出た影響で旧型から新型に変わった。
処理開始のタイミングがon+（）内にいれて’ ’で囲む書き方になっている
※イベントの書き方（これは覚えといた方がいい形）
Ex）
＄（’#btn1’）.on('click',function'( ){
（’#box1’）.hide( );
});
→#btn1をクリックしたら指定処理（’#box1’）.hide( );を実行
・イベント一覧
dblclick
mouseup
mouseover
mouseout
mousemove
keyup
focus
change
scroll
load
〇表示非表示
1 $('処理場所').hide(表示速度); →非表示
2 $('#box1').show(500); →表示
3 $('#box1').toggle(500); 表示＆非表示
4 $('#box1').fadeTo(表示速度, 透明度);→これは透明度を自由に設定できるメソッド
〇アニメーション
・イージングキーワードとは
指定したものに独特な動きを加えるもの
ex)'swing' 'linear'
停止の設定をしないと動作中に操作ができなくなる。
以下板書
〇jQueryの続き
// < !DOCTYPE html >
// <html lang="ja">
// <head>
// <meta charset="UTF-8">
// <meta name="viewport" content="width=device-width, initial-scale=1.0">
// <title>jQueryを試してみる</title>
// </head>
// <body>
// <div class="box">
// <div class="inner">
// <h1>jQueryを試してみる</h1>
// <div class="photo">
// <img id="mountain" src="https://jobtech.jp/test.jpg">
// </div>
// <h2>jQueryの記述法</h2>
// <p>jQueryもJavaScriptで書かれているものなので、<br>
// scriptタグで囲んだ中に記述していきます</p>
// <h3>練習１</h3>
// <div id="content1">
// 同じ要素に複数の処理を適用させる場合は、
// メソッドチェーンを使用します。
// </div>
// <h3>練習２</h3>
// <div id="content2">
// 同じ要素に複数の処理を適用させる場合は、
// メソッドチェーンを使用します。
// </div>
// <h3>練習３</h3>
// <div id="content3">
// 同じ要素に複数の処理を適用させる場合は、
// メソッドチェーンを使用します。
// </div>
// </div>
// </div>
<script>
$(window).on('load', function () {
// // ページ読み込み完了後の処理を記述する
$('#content1').width(300);
// // メソッドチェーンを使用する
$('#content2')
.width(300);
$('#content3')
.width(300);
// // 練習１
// // ID名「content3」に背景色#ffcと文字色greenと幅50%を設定してみる
$('#content3')
'color': 'green',
})
.width('50 %');
// 練習２
// 写真の幅を取得してコンソールに表示する
// let imgWidth = $('.photo ').css('width')
// console.log(imgWidth);
// 別解
let imgWidth = $('#mountain').width();
console.log(imgWidth);
// 練習3
// 画像の高さを取得
let imgHeight = $('#mountain').height();
console.log(imgHeight);
-----------↓解答できなかった問題--------------
// 練習4
// 画像の幅を取得して200ｐｘ減らして画像を表示
$('#mountain').width(imgWidth - 200);
console.log($('#mountain').width());
// 960ｐｘから200ｐｘを引いたもの
let newWidth = $('#mountain').width()
// わかりやすく宣言
// console.log($('#mountain').width());確認用
$('#mountain').width(newWidth);
// ブラウザで反映させるための記述
// 問題5
// 3秒後さらに200ｐｘ減らして表示
window.setTimeout(function () {
$('#mountain').width(newWidth - 200);
// さらに200ｐｘを引いたものを作るための記述
console.log($('#mountain').width());
// さらに200ｐｘを引いたもの
$('#mountain').width()
// ブラウザ上に表示するための記述
}, 3000)
});
</script>
// </body >
// </html >
〇イベント演習問題
{/* <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQueryを試してみる</title>
</head>
<body>
<div class="box">
<div class="inner">
<p class="btn1 btn">ボタン１</p>
<p class="box1">ボックス１</p>
<p class="btn2 btn">ボタン２</p>
<p class="box2">ボックス２</p>
<p class="btn3 btn">ボタン３</p>
<p class="box3">ボックス３</p>
<p class="btn4 btn">ボタン４</p>
<p class="box4">ボックス４</p>
<p class="btn5 btn">ボタン５</p>
<p class="box5">ボックス５</p>
</div>
</div> */}
<script>
$(function () {
$('.btn1').on('click', function () {
});
場所： $('.btn1')→クラス名「btn1」要素
種類：'click'→クリック
処理：function () {
→クラス名「btn1」の文字色を赤に変更
// 練習１
// クラス名「btn2」をクリックしたときに
// クラス名「box2」の文字色を青にしてみる
$('.btn2').on('click', function () {
});
// 練習２
// クラス名「btn3」をダブルクリックしたときに
// クラス名「box3」の背景色を#fccに設定してみる
$('.btn3').on('click', function () {
});
// 実践
// 「btn3」以降を自由に設定してみる
$('.btn4').on('click', function () {
});
$('.btn5').on('click', function () {
});
});
</script>
//</body >
// </html >
イベント一覧
dblclick
mouseup
mouseover
mouseout
mousemove
keyup
focus
change
scroll
load
〇表示非表示
$('#box1').hide(500); →非表示
$('#box1').show(500); →表示
$('#box1').toggle(500); 表示＆非表示
☆fadeTo
$('#box1').fadeTo(秒数, 透明度);
これは透明度を自由に設定できるメソッド
// 表示非表示のメソッドは処理完了後に呼び出す関数を指定できる
// ex）$('場所').show（時間,関数）;
処理完了後に呼び出す関数をコールバック関数という
// --------------演習問題-----------------------
// < !DOCTYPE html >
// <html lang="ja">
// <head>
// <meta charset="UTF-8">
// <meta name="viewport" content="width=device-width, initial-scale=1.0">
// <title>jQueryを試してみる</title>
// </head>
// <body>
// <div class="box">
// <div class="inner">
// <p class="btn1-1 btn">ボックス１非表示</p>
// <p class="btn1-2 btn">ボックス１表示</p>
// <p class="box1">ボックス１</p>
// <p class="btn2-1 btn">ボックス２非表示</p>
// <p class="btn2-2 btn">ボックス２表示</p>
// <p class="box2">ボックス２</p>
// <p class="btn3 btn">ボックス３トグル</p>
// <p class="box3">ボックス３</p>
// <p class="btn4-1 btn">スライドアップ非表示</p>
// <p class="btn4-2 btn">スライドダウン表示</p>
// <p class="box4">ボックス４</p>
// <p class="btn5 btn">スライドトグル</p>
// <p class="box5">ボックス５</p>
// <p class="btn6-1 btn">フェードアウト非表示</p>
// <p class="btn6-2 btn">フェードイン表示</p>
// <p class="box6">ボックス６</p>
// <p class="btn7 btn">フェードトグル</p>
// <p class="box7">ボックス７</p>
// <p class="btn8 btn">fadeTo</p>
// <p class="box8">ボックス８</p>
// </div>
// </div>
<script>
$(function () {
$('.btn1-1').on('click', function () {
$('.box1').hide(500);
});
// 練習１
// クラス名「btn1-2」をクリックしたときに
// クラス名「box1」を表示にする
$('.btn1-2').on('click', function () {
$('.box1').show(500);
});
// 練習２
// クラス名「btn2-1」をダブルクリックしたときに
// クラス名「box2」を非表示する
$('.btn2-1').on('dblclick', function () {
$('.box2').hide(500);
});
// クラス名「btn2-2」をダブルクリックしたときに
// クラス名「box2」を表示する
$('.btn2-2').on('dblclick', function () {
$('.box2').show(500);
});
// 練習３
// クラス名「btn3」をクリックするごとに
// クラス名「box3」の表示・非表示を切り替える
$('.btn3').on('click', function () {
$('.box3').toggle(500);
});
// 練習４
// クラス名「btn4-1」をクリックしたときに
// クラス名「box4」をスライドアップ非表示する
$('.btn4-1').on('click', function () {
$('.box4').slideUp(500);
});
// クラス名「btn4-2」をクリックしたときに
// クラス名「box4」をスライドダウン表示する
$('.btn4-2').on('click', function () {
$('.box4').slideDown(500);
});
// 練習５
// クラス名「btn5」をクリックするごとに
// クラス名「box5」のスライドを使って表示・非表示を切り替える
$('.btn5').on('click', function () {
$('.box5').slideToggle(500);
});
// 練習６
// クラス名「btn6-1」をクリックしたときに
// クラス名「box6」をフェードアウト非表示する
$('.btn6-1').on('click', function () {
$('.box6').fadeOut(500);
});
// クラス名「btn6-2」をクリックしたときに
// クラス名「box6」をフェードイン表示する
$('.btn6-2').on('click', function () {
$('.box6').fadeIn(500);
});
// 練習７
// クラス名「btn7」をクリックするごとに
// クラス名「box7」のフェードを使って表示・非表示を切り替える
$('.btn7').on('click', function () {
$('.box7').fadeToggle(500);
});
// 実践１
// fadeToメソッドを調べて
// クラス名「btn8」をクリックするごとに
// クラス名「box8」のフェードを使って表示・非表示を切り替える
// fadeToメソッド→任意の透明度に変更
// このメソッドはtoggleがないので自前で実装させるしかない
$('.btn8').on('click', function () {
// クリックしたときの動作関数
// もしボックス8の透明度が文字型で1だった時
$('.box8').fadeTo(500, 0)
// 透明度0に向かって切り替える
} else {
$('.box8').fadeTo(500, 1)
// そうじゃなかったら1に向かって切り替える
}
});
// 実践２
// クラス名「btn8」をクリックするごとに
// ボタンの背景色を変更する
詳しくはUSBの中へ
〇アニメーション .animate()
// <!DOCTYPE html>
// <html lang="ja">
// <head>
// <meta charset="UTF-8">
// <meta name="viewport" content="width=device-width, initial-scale=1.0">
// <title>jQueryを試してみる</title>
// </head>
// <body>
// <div class="box">
// <div class="inner">
// <p class="btn1-1 btn">左へ10px移動</p>
// <p class="btn1-2 btn">右へ10px移動</p>
// <p class="box1 animeBox anime">ボックス１</p>
// <p class="btn2-1 btn">左へ300px移動</p>
// <p class="btn2-2 btn">右へ300px移動</p>
// <p class="box2 animeBox anime">ボックス２</p>
// <p class="btn3-1 btn">左へ300px移動</p>
// <p class="btn3-2 btn">右へ300px移動</p>
// <p class="btn3-3 btn">上へ300px移動</p>
// <p class="btn3-4 btn">下へ300px移動</p>
// <p class="box3 animeBox anime">ボックス３</p>
// <p class="btn4-1 btn">左へ300px移動</p>
// <p class="btn4-2 btn">右へ300px移動</p>
// <p class="btn4-3 btn">上へ300px移動</p>
// <p class="btn4-4 btn">下へ300px移動</p>
// <p class="box4 anime">
// <img src="img/p_01.gif">
// </p>
// </div>
// </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script>
$(function () {
// サンプル１
$('.btn1-1').on('click', function () {
let animeElm = $('.box1');
// アニメーションをさせる要素オブジェクトを取得
// 変数animeElmに代入
// アニメーションさせる要素のleftプロパティを取得して数値に変換後に変数animeLeftに代入
animeElm.animate({ 'left': animeLeft + 10 });
// アニメーションさせる要素のleftプロパティを+10してアニメーション
});
// 練習１
// クラス名「btn1-2」をクリックしたときに
// クラス名「box1」を現在位置から右に10px移動する
// サンプル２
$('.btn2-1').on('click', function () {
let animeElm = $('.box2');
animeElm.animate({'left': animeLeft + 300 }, 3000);
});
$('.btn2-2').on('click', function () {
let animeElm = $('.box2');
animeElm.animate({'left': animeLeft - 300 }, 3000);
});
// サンプル３
$('.btn3-1').on('click', function () {
let animeElm = $('.box3');
animeElm.stop().animate({'left': animeLeft + 300 }, 3000);
});
$('.btn3-2').on('click', function () {
let animeElm = $('.box3');
animeElm.stop().animate({'left': animeLeft - 300 }, 3000);
});
// 練習２
// クラス名「btn3-3」をクリックしたときに
// クラス名「box3」を現在位置から上に300px移動させる
// クラス名「btn3-4」をクリックしたときに
// クラス名「box3」を現在位置から下に300px移動させる
// ※移動中にボタンが押された時はその場から次の移動を開始させる
// サンプル４
$('.btn4-1').on('click', function () {
let animeElm = $('.box4');
animeElm.stop().animate({'left': animeLeft + 300 }, 3000, 'easeInBounce');
});
$('.btn4-2').on('click', function () {
let animeElm = $('.box4');
animeElm.stop().animate({'left': animeLeft - 300 }, 3000, 'easeInBounce');
});
// 練習３
// クラス名「btn4-3」をクリックしたときに
// クラス名「box4」を現在位置から上に300px移動させる
// クラス名「btn4-4」をクリックしたときに
// クラス名「box4」を現在位置から下に300px移動させる
// 移動時のイージングキーワードをいろいろと試すこと
// ※移動中にボタンが押された時はその場から次の移動を開始させる
});
</script>
</body>
</html>
