2020/6/1~6/5_今週の勉強

jQuery-フェードイン機能

progateで、jQuery編の勉強をしました。

内容は、「モーダル表示」と「アコーディオン表示」です。

特定の文字や画像などの上にカーソルを移動させた時に、その文字や画像の説明文が表示される機能を制作するという勉強です。

実際に記述したコード

まず、「header.php」の中の「<meta name=”viewport” content=”width=device-width, initial-scale=1.0, viewport-fit=cover”/>」の下に「<script src=”//code.jquery.com/jquery-1.12.1.min.js”>」を追記します。
（このコードで、JavaScriptだけでなく、jQueryも実行することができるようになります。）

html

<section class="test-section">
 <div id="jQ-test1" class="button">ここをクリック</div>
 <div id="jQ-test2">表示されました<br><div id="jQ-test3" class="button">これで削除</div> 
 </div>
</section>

css

#test2{
 display:none;
}

jQuery

$(function(){
 $('#jQ-test1').click(function(){
  $('#jQ-test2').slideDown();
 });
 $('#jQ-test3').click(function(){
  $('#jQ-test2').slideUp();
 });
});

とても初歩的なコードですが、「とりあえず実行できた」という一歩が大きく、まずスタートラインに立てたかなという印象です。