jQueryでスル～っと表示/非表示する方法

1行で実現できるフェードイン・フェードアウトレシピの紹介です。
表示させるボタンには、あらかじめCSSで「display:none;」をかけておきます。

フェードインボタン

HTML

<div class="fadein_btn">
  表示ボタン
</div>
<div class="fadein">
  <img sec="https://hajimete.org/wp-content/uploads/2019/12/top.jpg" alt="" />
</div>

jQuery

$(".fadein_btn").on("click", function() {
  $(".fadein").fadeIn();
});

フェードアウトボタン

HTML

<div class="fadeout_btn">
  非表示ボタン
</div>
<div class="fadeout">
  <img sec="https://hajimete.org/wp-content/uploads/2019/12/top.jpg" alt="" />
</div>

jQuery

$(".fadeout_btn").on("click", function() {
  $(".fadeout").fadeOut();
});