Q&A
CSS のコードも提示してもらえますか。
jQuery でtop bottom を設定してますが、position が static以外に設定されていないと効果ないので。
.animate({"bottom":downHeight}) は .animate({bottom:downHeight}) ではないかと。
また、画像も https://placehold.jp/ でダミー画像を作成して設定してもらうとより分かりやすいです。
前提・実現したいこと
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の逆）ようにしたいです。
よろしくお願いいたします。
回答1件
0
ベストアンサー
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
総合スコア337
z-indexでうまくいきました！
Javascriptも綺麗に直してくださりありがとうございます。
お役に立ててよかったのですが、スライドして要素が隠れたときに、.under-bannerの高さ方向がその場に残ってしまうのが難点ですね。
その場合は、.under-bannerをabsoluteにして、位置を固定し、.under-bannerのすぐ下の要素にmargin-topを入れて、同時にanimateするとよろしいかと思います。
あなたの回答
tips
プレビュー
