Chapter03 アニメとイベント

概要と目標 アニメーションやイベントの種類を
学習しよう。

jQueryを使ったアニメーションやイベントの指定方法を学習しましょう。

今回のゴール

RERUN

新しいウインドウで表示する

エフェクト 表示と非表示を
アニメーションで切り替える

表示 （display: block） 、非表示 （display: none）をフェードで切り替えたり、
スライドで切り替えたりできる。

表示/非表示
$(セレクタ).show(スピード, コールバック関数); // 表示
                       省略可
$(セレクタ).hide(スピード, コールバック関数); // 非表示
                       省略可
$(セレクタ).toggle(スピード, コールバック関数); // 上記2つを自動で判別
                         省略可

【スピード】は、ミリ秒（1秒 = 1000[初期値: 400]）または、 'fast'（早い）、'normal'（普通）、'slow'（遅い）で指定

詳細はjQuery API Documentationのshow()、hide()、toggle()を参照

スライドによる表示/非表示
$(セレクタ).slideDown(スピード, コールバック関数); // スライドで表示
                           省略可
$(セレクタ).slideUp(スピード, コールバック関数); // スライドで非表示
                           省略可
$(セレクタ).slideToggle(スピード, コールバック関数); // 上記2つを自動で判別
                               省略可

【スピード】は、ミリ秒（1秒 = 1000[初期値: 400]）または、 'fast'（早い）、'normal'（普通）、'slow'（遅い）で指定

詳細はjQuery API DocumentationのslideDown()、slideUp()、slideToggle()を参照

フェードによる表示/非表示
$(セレクタ).fadeIn(スピード, コールバック関数); // フェードで表示
                         省略可
$(セレクタ).fadeOut(スピード, コールバック関数); // フェードで非表示
                          省略可
$(セレクタ).fadeToggle(スピード, コールバック関数); // 上記2つを自動で判別
                            省略可

【スピード】は、ミリ秒（1秒 = 1000[初期値: 400]）または、 'fast'（早い）、'normal'（普通）、'slow'（遅い）で指定

詳細はjQuery API DocumentationのfadeIn()、fadeOut()、fadeToggle()を参照

エフェクトを使ってみよう。

  1. 「chapter03」 › 「effect」フォルダ内の「index.html」をテキストエディタで開き、HTMLの構成を確認する
  2. 「chapter03」 › 「effect」フォルダ内の「app.js」をテキストエディタで開く
  3. 下記のjQueryを追記
chapter03/effect/app.js
$(function () {
  /*
    表示/非表示
  --------------------------------------- */

  // show ・・・ 表示
  $('.js-show').click(function () {
    $('#box1').show(300);
  });

  // hide ・・・ 非表示
  $('.js-hide').click(function () {
    $('#box1').hide(300);
  });

  // toggle ・・・ 表示/非表示
  $('.js-toggle').click(function () {
    $('#box1').toggle(300);
  });

  /*
    スライド
  --------------------------------------- */

  // slideDown ・・・ スライドで表示
  $('.js-slideDown').click(function () {
    $('#box2').slideDown(300);
  });

  // slideUp ・・・ スライドで非表示
  $('.js-slideUp').click(function () {
    $('#box2').slideUp(300);
  });

  // slideToggle ・・・ スライドトグル
  $('.js-slideToggle').click(function () {
    $('#box2').slideToggle(300);
  });


  /*
    フェード
  --------------------------------------- */

  // fadeIn ・・・ フェードイン
  $('.js-fadeIn').click(function () {
    $('#box3').fadeIn(300);
  });

  // fadeOut ・・・ フェードアウト
  $('.js-fadeOut').click(function () {
    $('#box3').fadeOut(300);
  });

  // fadeToggle ・・・ フェードトグル
  $('.js-fadeToggle').click(function () {
    $('#box3').fadeToggle(300);
  });

});
  1. 上書き保存
  2. ブラウザで「chapter03」› 「effect」フォルダ内の「index.html」をブラウザで表示
  3. クリックするとエフェクトが設定できているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

アニメーションが止まらない
上記のエフェクトは、アニメーションを実行中に「表示」「非表示」ボタンをすばやくクリックすると、クリックした回数分アニメーションが継続される。
この問題を解決したい場合は、 アニメーション中の要素に適用するセレクターである、:animated()を、:not()と組み合わせることで解決できる。
アニメーション中以外の時だけ有効にする
$('.js-toggle').click(function () {
  $('#box1:not(:animated)').toggle(300);
});

アニメーション 独自のアニメーションを
設定することもできる。

任意のCSSの値などをアニメーションで変化させることができる。

animate（アニメート）() ・・・ アニメーション
$(セレクタ).animate(変更内容, スピード, 動き方, コールバック関数);
                                    省略可

【スピード】は、ミリ秒（1秒 = 1000[初期値: 400]）または、 'fast'（早い）、'normal'（普通）、'slow'（遅い）で指定 
【動き方】は、'swing'（加速と減速[初期値]）、 'linear'（一定の速度）で指定

詳細はjQuery API Documentationを参照

アニメーションを使ってみよう。

  1. 「chapter03」 › 「animation」フォルダ内の「index.html」をテキストエディタで開き、HTMLの構成を確認する
  2. 「chapter03」 › 「animation」フォルダ内の「app.js」をテキストエディタで開く
  3. 下記のjQueryを追記
chapter03/animation/app.js
$(function () {

  // animate() ・・・ 独自のアニメーション
  $('.js-button').click(function () {
    $('#box1').animate({
      'margin-left': '500px',
      'margin-top': '500px'
    }, 500, 'linear');
  });
});
  1. 上書き保存
  2. ブラウザで「chapter03」› 「animate」フォルダ内の「index.html」をブラウザで表示
  3. クリックするとアニメーションが設定できているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

クリックイベント clickイベントを使って
アコーディオンメニューを作る。

clickイベントを使って様々なサイトで見かける、アコーディオンメニューを作ってみる。
複数の設置にも対応できるように、便利な$(this)というキーワードや、それに関連してよく使うメソッドも使う。

アコーディオンメニューを作ってみよう。

  1. 「chapter03」 › 「accordion」フォルダ内の「index.html」をテキストエディタで開き、HTMLの構成を確認する
  2. 「chapter03」 › 「accordion」フォルダ内の「app.js」をテキストエディタで開く
  3. 下記のjQueryを追記
chapter03/accordion/app.js
$(function () {
  $('.js-button').click(function () {
    $('ul').slideToggle(300);
  });
});
  1. 上書き保存
  2. ブラウザで「chapter03」› 「accordion」フォルダ内の「index.html」をブラウザで表示
  3. クリックするとメニューが開閉するかを確認
  4. 「でも、おや！全部一緒に動いてる！」となってるか確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

複数の設置に対応させよう。

セレクタで指定した要素が、複数ヒットする場合は、今回のように全ての要素で処理が行われる。
イベントが発生した要素自身を使いたい場合は、$(this)という特殊なキーワードのセレクターを使う。

イベントが発生した要素を取得
$(セレクタ).click(function() {
  $(this).メソッド(パラメータ);
});

また、このイベントが発生した要素の次の要素や、親要素など、セレクタを指定（移動）するためのメソッドもある。

要素を指定するメソッド
指定する要素 メソッド名 書式
直近の親要素 parent() $(セレクタ).parent(セレクタ[省略可])
祖先の親要素 parents() $(セレクタ).parents(セレクタ[省略可])
直近の子要素 children() $(セレクタ).children(セレクタ[省略可])
子孫の要素 find() $(セレクタ).find(セレクタ[省略可])
兄弟要素 siblings() $(セレクタ).siblings(セレクタ[省略可])
次の要素 next() $(セレクタ).next(セレクタ[省略可])
前の要素 prev() $(セレクタ).prev(セレクタ[省略可])
  1. 「chapter03」 › 「accordion」フォルダ内の「app.js」をテキストエディタで開く
  2. 下記のjQueryを追記
chapter03/accordion/app.js
$(function () {
  $('.js-button').click(function () {
    // イベントが発生した要素の次の要素
    $(this).next().slideToggle(300);
  });
});
  1. 上書き保存
  2. ブラウザで「chapter03」› 「accordion」フォルダ内の「index.html」をブラウザで表示
  3. クリックするとアニメーションが設定できているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

a要素のclickイベントは、注意が必要
a要素は、もともとクリックすると href 属性に指定された リンク先にジャンプする機能がある。
従って、a要素にclickイベントを指定しても、イベントは発生するが、すぐにリンク先に移動してしまいます。
対策としてはイベント処理の最後にreturn false;を追加するか、preventDefault()メソッドを使って、リンク機能を無効にするなどの方法があります。
return false; を使う方法
$('a').click(function() {
  $('img').attr('src', $(this).attr('href'));
  return false;
});
preventDefault() メソッドを使う方法
$('a').click(function(e) {
  e.preventDefault();
  $('img').attr('src', $(this).attr('href'));
});

マウスイベント マウスを乗せた時や、
動かした時にイベントが発動する。

マウスに関するイベントも様々なものがある。

mouseenter（マウスエンター）() ・・・ マウスが乗った時
$(セレクタ).mouseenter(function() {
  // マウスが乗った時の処理
});

詳細はjQuery API Documentationを参照

mouseleave（マウスリーブ）() ・・・ マウスが離れた時
$(セレクタ).mouseleave(function() {
  // マウスが離れた時の処理
});

詳細はjQuery API Documentationを参照

hover（ホバー）() ・・・ マウスが乗った時と離れた時
$(セレクタ).hover(function() {
  // マウスが乗った時の処理
}, function() {
  // マウスが離れた時の処理
});

詳細はjQuery API Documentationを参照

mousemove（マウスムーブ）() ・・・ マウスが動いた時
$(セレクタ).mousemove(function() {
  // マウスが動いた時の処理
});

詳細はjQuery API Documentationを参照

マウスイベントを使ってみよう

  1. 「chapter03」 › 「mouse」フォルダ内の「index.html」をテキストエディタで開き、HTMLの構成を確認する
  2. 「chapter03」 › 「mouse」フォルダ内の「app.js」をテキストエディタで開く
  3. 下記のjQueryを追記
chapter03/mouse/app.js
$(function () {

  // mouseenter() ・・・ マウスが乗った時
  $('#photo1').mouseenter(function () {
    $(this).attr('src', 'images/onigiri.jpg').attr('alt', 'おにぎり');
  });

  // mouseleave() ・・・ マウスが離れた時
  $('#photo1').mouseleave(function () {
    $(this).attr('src', 'images/pasta.jpg').attr('alt', 'パスタ');
  });

  // hover() ・・・ マウスが乗った時と離れた時
  $('#photo2').hover(function () {
    $(this).attr('src', 'images/onigiri.jpg').attr('alt', 'おにぎり');
  }, function () {
    $(this).attr('src', 'images/pasta.jpg').attr('alt', 'パスタ');
  });

  // mousemove() ・・・ マウスが動いた時
  $('#box1').mousemove(function (e) {
    $(this).text('X：' + e.pageX + 'Y：' + e.pageY);
  });
});
  1. 上書き保存
  2. ブラウザで「chapter03」› 「mouse」フォルダ内の「index.html」をブラウザで表示
  3. マウスイベントが設定できているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

jQueryで追加した要素にイベント jQueryで追加した要素には、
イベントを設定することが出来ない。

jQueryで append() などを使って追加した要素にはイベントが設定できない。
その場合、on()というメソッドを使用するとイベントが付けれる。

on（オン）() ・・・ jQueryオブジェクトにイベントバインドする
$(親要素のセレクタ).on(イベント名, イベントを設定するセレクタ, function() {
  // イベントが発生した時の処理
});

詳細はjQuery API Documentationを参照

on()メソッドを使ってみよう

  1. 「chapter03」 › 「on」フォルダ内の「index.html」をテキストエディタで開き、HTMLの構成を確認する
  2. 「chapter03」 › 「on」フォルダ内の「app.js」をテキストエディタで開きコードを確認
  3. 「chapter03」 › 「on」フォルダ内の「index.html」をブラウザで開き、
    jQueryで追加した要素にイベントが効いてないことを確認
  4. 下記を参考に、app.jsにコメントとjQueryコードを追記する
chapter03/on/app.js
$(function () {
  $('.js-button').click(function () {
    $('ul').append('<li>jQueryで追加したぜ！</li>');
  });

  // $('li').click(function () {
  //   $(this).remove();
  // });

  // on() ・・・ jQueryオブジェクトにイベント設定
  $('ul').on('click', 'li', function () {
    $(this).remove();
  });
});
  1. 上書き保存
  2. ブラウザで「chapter03」› 「on」フォルダ内の「index.html」をブラウザで表示
  3. マウスイベントが設定できているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題 今回の理解度をチェック。

「chapter03」 › 「training」フォルダ内の「index.html」を開き、
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

    • ファイル名： app.js
    • class属性やID属性を任意で設定してOK
解答例
chapter03/training/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>練習問題3</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="container">
      <h1>練習問題3</h1>

      <nav>
        <ul class="js-dropdown global-nav">
          <li><a href="#">Home</a></li>
          <li>
            <a href="#">Company</a>
            <ul class="js-dropdown-child">
              <li><a href="#">会社概要</a></li>
              <li><a href="#">代表あいさつ</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Service</a>
            <ul class="js-dropdown-child">
              <li><a href="#">取扱商品</a></li>
              <li><a href="#">納品スケジュール</a></li>
            </ul>
          </li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
    <!-- /.l-container -->
  </header>


  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="app.js"></script>
</body>
</html>
chapter03/training/app.js
$(function () {
  // 「.js-dropdown-child」を非表示に
  $('.js-dropdown-child').hide();

  $('.js-dropdown > li').hover(function () {
    // マウスが乗った時
    $(this).find('.js-dropdown-child:not(:animated)').slideDown(300);
  }, function () {
    // マウスが離れた時
    $(this).find('.js-dropdown-child:not(:animated)').slideUp(300);
  });
});

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめ 様々なアニメーションや
イベントがある。

jQueryには、手軽に使える様々な種類のアニメーションや イベントがある。

  • スライドやフェードなどのエフェクトがある
  • クリック以外にもマウス系のイベントなどがある
  • jQueryで追加した要素にはon()メソッドでイベントを付ける