【JavaScript】クリックで表示・非表示をふわっと切り替えたい【jQuery】

見本ツール：分量変えるくん1号

「分数 → 少数のヒント」をクリックすると、ふきだしがふわっと表示されるようになっています。
また、もう一度クリックするとふわっと消えます。

HTML のコード

<div class="hint-wrap">
  <div id="hint" class="hint">
    <p><i class="far fa-question-circle"></i> 分数 → 小数のヒント</p>
  </div>

  <div class="hint-box">
    <!-- ヒントの内容 -->
    <div id="balloon" class="balloon hide">
      <div class="balloon2-top">
        <div class="hint-left">
          <p><span>1/2</span> = 0.5</p>
          <p><span>1/4</span> = 0.25</p>
          <p><span>1/8</span> = 0.125</p>
        </div>
        <div class="hint-right">
          <p><span>1/3</span> = 0.333</p>
          <p><span>2/3</span> = 0.666</p>
          <p><span>3/4</span> = 0.75</p>
        </div>
      </div>
    </div>
  </div>
</div>

jQuery のコード

// 分数のヒントをクリックでオンオフ
$('#hint').click(function() {
  $('#balloon').fadeToggle(200);
});

あれこれ調べたんですが、.fadeToggle() を使うのが一番簡単そうでした。

() の中の数値でアニメーションの速度を変更できます。