JavaScript
PC SAURUS

文字要素をフェードイン&フェードアウトさせる方法　jQueryとJavaScriptのコード

今回の記事の内容

文字をクリックしたら消えていた文字がフェードインする方法
文字をクリックしたら別の文字がフェードアウトしていく方法

文字要素をフェードイン　jQuery

まずはコードの下準備として

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  </head>

  <body>
    <div id="txt" class="txt">Hello</div>
    <div id="fadeIn_txt" class="fadeIn_txt" style="display: none;">World！</div>
    <script src="src/index.js"></script>
  </body>
</html>

Worldはstyle='display:none' で消しているので、ブラウザ上はHelloの文字が表示されています

fadeIn()　基本構文

fadeIn()　メソッド
HTML要素.fadeIn( 時間 );

時間は省略可なので、.fadeIn()と、書くことができます

$(function () {
  $(".txt").click(function () {
    $(".fadeIn_txt").fadeIn("slow");
  });
});

このように記述することで、「Hello」をクリック
→「World」が、ゆっくり（slow）でフェードインしてきます
3秒かけて表示させたい場合は3000(ミリ秒)として、.fadeIn(3000)と書きます
slowは600ミリ秒、fastが200ミリ秒の設定になっています

文字要素をフェードイン　JavaScript

document.getElementById("txt").addEventListener("click", () => {
  const uptxt = document.getElementById("fadeIn_txt");
  uptxt.style.display = "block";
});

ある程度javascriptを触ったことのある人だったら説明は不要だと思いますが、
txtを取得→クリックイベントを作成
⇨fadeIn_txtを取得→uptxtに代入
⇨uptxtにstyleを当てています

これを見たらわかる人がいると思うのですが、このコードではフェードインはしません^^;
display='block'でdisplay='none'を上書きしているだけなのでじんわりではなく、パッと表示されます
アニメーションみたいなプロパティを当てれば良いのですが、自分のスキルではこの書き方が限界でした...
もっと勉強します_φ(･_･！！

JavaScript MDN
jQuery ドキュメント

文字要素をフェードアウト　jQuery

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  </head>

  <body>
    <div id="txt" class="txt">Hello</div>
    <div id="fadeOut_txt" class="fadeOut_txt">World！</div>
    <script src="src/index.js"></script>
  </body>
</html>

今度はフェードアウトです
現在ブラウザでは『Hello』と『World!』の文字が表示されている状態です
javascriptのイベントのコードを書いて『World!』をフェードアウトしてみます
書き方はfadeIn()メソッドと同じでfadeIn→fadeOutに書き換えるだけです

$(function () {
  $(".txt").click(function () {
    $(".fadeOut_txt").fadeOut("slow");
  });
});

文字要素をフェードアウト　JavaScript

document.getElementById("txt").addEventListener("click", () => {
  const outtxt = document.getElementById("fadeOut_txt");
  outtxt.style.display = "none";
});

これもフェードイン同様パッと消えてしまいます( ；∀；)

JavaScript　チュートリアル
jQuery　チュートリアル

今回のコードを書くにあたって参考にした書籍を紹介します
以下の3冊はすごくおすすめです！

おすすめの記事