【jQuery】基本の書き方、アニメーション・click・hoverの指定

jQueryの書き方
アニメーションの指定
clickした時の指定
hoverした時の指定
参考

jQueryの書き方

f:id:utataneclub:20190916020314p:plain

$(function(){
　//この中に書く
});

functionの中に書く。

$(function(){

  $('セレクタ').メソッド(引数);

});

アニメーションの指定

f:id:utataneclub:20190916020705p:plain

//非表示にする
$('h1').hide();

//表示にする
$('h1').show();

//フェードアウト
$('h1').fadeOut();

//フェードイン
$('h1').fadeIn();

//スライドアップ
$('h1').slideUp();

clickした時の指定

$(function(){
  $("#sample").click(function(){

　//クリックされたときに何が起きるかを書く

  });
});

hoverした時の指定

ポイント

hoverのあとにfunctionを2つ書く

前者はON、後者はOFFの挙動を指定する

  $('.lesson').hover(
    function() { //カーソルを重ねた時
      $(this).find('.text-contents').addClass('text-active');
    },
    function() { //カーソルを外した時
      $(this).find('.text-contents').removeClass('text-active');
    }
  );