jQueryとは？【jQuery勉強まとめ②】

jQueryのイベントメソッド

例「ボタンをクリックすると、ボックスの色が変わる」

　この指示の中で、イベントメソッドに当たるのは、
「ボタンをクリックすると」の部分である。

記述例

HTML
    <button>fadeOut</button>
   <div class="box">box</div>

CSS
.box {
   background-color: #a11;
   width: 300px;
   height: 300px;
}

jquery
    <script>
       $(function () {
           $('button').click(function () {
               $('.box').css('background', '#333')
           });
       });
   </script>

$('button').clickの中にfunctionから記述を始める。

例2「ボタンをクリックすると、2秒かけてフェードアウトし、”完了しました！”と告知される」

jQuery
    <script>
       $(function () {
           $('button').click(function () {
               $('.box').fadeOut(2000, function () {
                   alert('完了しました！')
               })
           });
       });
   </script>

CSSアニメーションを組み合わせた記述

cssのtransitionを使用して、変化に動きをつける。

例「ボタンをクリックすると、クラス名boxのcss(opacity)が2秒かけて0になる(消える)」

css
.box {
   background-color: #a11;
   width: 300px;
   height: 300px;
   transition: opacity.2s;
}

jQuery
<script>
       $(function () {
           $('button').click(function () {
               $('.box').css('opacity', 0);
           });
       });
   </script>

★CSS と連動させることによって、アニメーションの処理が重たいのを回避することができる！（特にスマホ画面）

クラスの付け外し、「toggleClass」メソッドを使おう

「toggleClass」は、指定したクラスの指示内容をON・OFFができる。
★よく使用します！

例「ボタンをクリックすると、boxというクラスにclassというクラスが追加される。ボタンをクリックしたとき、すでにclassというクラスが含まれている場合は、classというクラスを外す」

jQuery
<script>
       $(function () {
           $('button').click(function () {
               $('.box').toggleClass('class');
           });
       });
   </script>

cssで、classというクラスにcolorなどを指定する。