jQuery教科書--入門2

jQueryを始めよう（onメソッド）

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム
jQuery-1.10.2及びjquery-ui-1.10.3がインストール済みか、jQuery CDN ドメインにリンク済み

注意、index.htmlやmain.cssは変えないものとする

【表示タイミングを変えるには】
1.ブルーの領域にマウスが乗ったら、色を赤にする
2.ブルーの領域外にマウスが来たら、色を戻す

⇅

「main.js」コードを書き換える。

$(function(){

   $('#typo').on('mouseover',function(){

        $(this).css({

          color:'#ff0000'

          });

   })

   .on('mouseout',function(){

    $(this).css({

     color:''

     });

   });

});

◆onの構造

オブジェクト.on('イベントタイプ'、ハンドラ関数）

 

◆メソッドチェーン
オブジェクト.メソッドA().メソッドB().メソッドC()・・・

【背景も変える】

「main.js」コードを書き換える。
$(function(){

   $('#typo')
    .on('mouseover',function(){　←メソードA

        $(this).css({

          color:'#ff0000',

          backgroundColor:'#84C98B'

   　　});

   })
   .on('mouseout',function(){　←メソードB

    $(this).css({

        color:'',

        backgroundColor:''

        });

    });

});

【アニメーションを作る】
文字を徐々に小さく、薄くする。

「main.js」コードを書き換える。
$(function(){

  $('#typo').on('click',function(){

     $('#typo .inner').animate({

          opacity:　0.3, ←透明度

          fontSize: '10px'

     }),

     1500

  })

});

.animate()の構文

.animate({

          'CSSプロパティ'：’値’

　　　'CSSプロパティ'：’値’

          'CSSプロパティ'：’値’

     },
　アニメーション時間
）;

【アニメーションのイージング機能】

.animate({

          'CSSプロパティ'：’値’

　　　'CSSプロパティ'：’値’

          'CSSプロパティ'：’値’

     },
　アニメーション時間,
   'イージングの種類'
　function(){
    アニメーション終了時に実行する処理

 }
）;

                                     　　↓

「main.js」のコードを書く
$(function(){

  $('#typo .inner')

    .css('top','-100px')

    .on('click',function(){

       $(this).animate({

          top:'100px'

       },

        1500,

        'linear'　←イージングの種類でふわっと動く

      );

    })

});
【アニメ終了時に、処理を書く】

「main.js」のコードを書く

$(function(){

  $('#typo .inner')

    .css('top','-100px')

    .on('click',function(){

       $(this)

       .animate({

          top:'100px'

        },

          1500,

          'linear',
　//後処理で色を変えて位置を真中に戻す

         function(){

           $(this).animate({top:'0px'},500)

           .css({

              color:'#db7093'

           })

         }

        );

    });

});

以上