jQueryアニメーションで上から下に要素を閉じる方法はあるのでしょうか。

前提・実現したいこと

jQueryでslideToglleの逆（上から下に閉じる、下から上に表示）のようなアニメーションを実装したいです。
「.under-banner-toggle」をクリックすると、「.under-banner」が消えたり表示されたりというアニメーションです。

該当のソースコード

HTML
1<div class="under-banner-toggle">
2    <div class="toggle-btn-wrapper">
3        <i class="open fas fa-angle-down"></i>
4    </div>
5    <hr class="toggle-line">
6</div>
7<div class="under-banner">
8    <a id="under-banner-LP" href="#" class="no-icon" target="_blank">
9        <img class="sp-only" src="https://---.png" alt="">
10    </a>
11</div>

該当のソースコード

jQuery
1$(".under-banner-toggle").click(function(){
2        var icon=$(this).find("i");
3        var downHeight=$(".under-banner").height();
4        if($(icon).hasClass("open")){
5            $(icon).removeClass("open");
6            $(icon).removeClass("fa-angle-down");
7            $(icon).addClass("fa-angle-up");
8            $(".under-banner-toggle").animate({
9            "top":downHeight
10            })
11        }else{
12            $(icon).removeClass("fa-angle-up");
13            $(icon).addClass("fa-angle-down");
14            $(icon).addClass("open");
15            $(".under-banner-toggle").animate({
16            "top":"0"
17            })
18        }
19        $(".under-banner").toggle();           
20    })

試したこと

jQueyソースコードに記載したように、消したい要素（.under-banner）を.toggleで隠し、「.under-banner-toggle」をアニメーションで下に移動する形でそれっぽく（上から要素が消えるような）動きにはなったのですが、もっといい方法があれば試してみたいと思っています。
ちなみに、「.under-banner」は上から消えて、下から表示される（slideToggleの逆）ようにしたいです。

よろしくお願いいたします。

hatena19

2019/12/31 14:12

CSS のコードも提示してもらえますか。 jQuery でtop bottom を設定してますが、position が static以外に設定されていないと効果ないので。 .animate({"bottom":downHeight}) は .animate({bottom:downHeight}) ではないかと。また、画像も https://placehold.jp/ でダミー画像を作成して設定してもらうとより分かりやすいです。

行動規範の内容に同意します

回答1件

ベストアンサー

z-indexで真上の要素の下に潜り込ませてしまってはどうでしょうか？

html
1<head>
2  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />
3</head>
4<div class="content">
5  content
6</div>
7<div class="under-banner-toggle">
8  <div class="toggle-btn-wrapper">
9    <i class="open fas fa-angle-down"></i>
10  </div>
11  <hr class="toggle-line">
12</div>
13<div class="under-banner">
14  <a id="under-banner-LP" href="#" class="no-icon" target="_blank">
15    <img class="sp-only" src="https://placehold.jp/150x150.png" alt="">
16  </a>
17</div>

css
1.content {
2  background: #fff;
3  height: 200px;
4}
5.under-banner-toggle {
6  background: #fff;
7}
8.under-banner {
9  z-index: -1;
10  position: relative;
11  top: 0;
12  left: 0;
13}

javascript
1$(".under-banner-toggle").click(function() {
2  var icon = $(this).find("i");
3  var downHeight = $(".under-banner").height() + 10;
4  $(icon).toggleClass("fa-angle-down");
5  $(icon).toggleClass("fa-angle-up");
6  if ($(icon).hasClass("open")) {
7    $(".under-banner").animate({ top: "-=" + downHeight }, 500);
8  } else {
9    $(".under-banner").animate({ top: "+=" + downHeight }, 500);
10  }
11  $(icon).toggleClass("open");
12});

投稿2019/12/31 16:17

satoshi_tajima

総合スコア337

takuma0401

2019/12/31 16:25

z-indexでうまくいきました！ Javascriptも綺麗に直してくださりありがとうございます。

satoshi_tajima

2019/12/31 16:49

お役に立ててよかったのですが、スライドして要素が隠れたときに、.under-bannerの高さ方向がその場に残ってしまうのが難点ですね。その場合は、.under-bannerをabsoluteにして、位置を固定し、.under-bannerのすぐ下の要素にmargin-topを入れて、同時にanimateするとよろしいかと思います。

行動規範の内容に同意します