jqueryのfadeIn()、fadeOut()が効かない

【実現したいこと】
サイトのグローバルメニューをレスポンシブ対応時にハンバーガーメニューの内部に配置し、ボタンクリックでグローバルメニュー要素はslideDownで表示、暗幕要素はfadeInで表示させたい。

【問題点】
グローバルメニュー要素の表示時のslideDownと非表示時のslideUpは動作するが、暗幕部分のfadeIn、fadeOutが動作していない

【該当部分のソース】

読み込んでいるjqueryのバージョンは「 1.11.3 」です

HTML
1<!-- SP用のモーダルグローバルメニュー -->
2<div class="spItem overlayMenu">
3	<div class="overlayMenuInner">
4		// overlayMenuInner内にグローバルメニューの要素を記述しています
5	</div>
6	<div class="space"></div> //暗幕部分です
7</div>

CSS
1.overlayMenu {
2    position: fixed;
3    top: 0;
4    left: 0;
5    width: 100%;
6    content: '';
7    overflow: auto;
8    background-color: rgba(0, 0, 0, 0.5);
9    z-index: 100000;
10  }
11
12  .overlayMenuInner {
13    display: none;
14    background-color: #FFFFFF;
15  }
16
17.overlayMenu .space {
18    display: none;
19    height: 100vh;
20  }

JavaScript
1let $overlay = $('.overlayMenu');
2let $inner = $('.overlayMenuInner');
3let $space = $('.space');
4let openClass = 'open';
5// ボタンでモーダル表示・非表示
6$(function(){
7  $('.button').on('click', function(){
8      $('.overlay-close').addClass('close');
9      $inner.css('display', 'none');
10
11      $('body').css('overflow', 'hidden');
12      
13      $inner.slideDown('100');
14      $space.hide();
15      $space.fadeIn(200);
16  });
17});
18$(function(){
19  $('.overlay-close').on('click', function(){
20
21      $('.overlay-close').delay('100').queue(function(){
22        $(this).removeClass('close');
23      });
24
25      $('body').css('overflow', 'auto');
26      
27      $inner.slideUp('100');
28      $space.fadeOut();
29  });
30});
31// モーダル上の要素外をクリックでモーダル非表示
32$($space).on('click', function(){
33  $('.overlay-close').delay('100').queue(function(){
34    $(this).removeClass('close');
35  });
36
37  $('body').css('overflow', 'auto');
38  
39  $inner.slideUp('100');
40  console.log($space);
41  $space.fadeOut();
42});

情報が不足している場合はご指摘いただけますと幸いです。
よろしくお願いいたします。

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

回答1件

自己解決

CSSで暗幕要素ではなく、その親要素である「 overlayMenu 」に対して暗幕色である「 background-color: rgba(0, 0, 0, 0.5); 」の指定をしていた影響でfadeIn(),fadeOut()の挙動が確認できなかっただけでした、、

親要素から暗幕要素へ背景色指定を変更し再度確認するとfadeIn(),fadeOut()の挙動が確認できました。

また、fadeIn(),fadeOut()だと動きがちょっとぎこちなかったのでJSではクラスの付け外しのみ指示して実際の動きはCSSのopacityの指定で調整することにしました。

【最終的なソース】

JavaScript
1let $inner = $('.overlayMenuInner');
2let $space = $('.space');
3let openClass = 'open';
4// ボタンでモーダル表示・非表示
5$(function(){
6  $('.button').on('click', function(){
7
8      $('.overlay-close').addClass('close');
9      $inner.css('display', 'none');
10      $('body').css('overflow', 'hidden');
11      $inner.slideDown('200');
12      $space.addClass('isShow');
13  });
14});
15$(function(){
16  $('.overlay-close').on('click', function(){
17      $('.overlay-close').delay('100').queue(function(){
18        $(this).removeClass('close');
19      });
20      $('body').css('overflow', 'auto');
21      $inner.slideUp('200');
22      $space.removeClass('isShow');
23  });
24});
25// モーダル上の要素外をクリックでモーダル非表示
26$($space).on('click', function(){
27  $('.overlay-close').delay('100').queue(function(){
28    $(this).removeClass('close');
29  });
30  $('body').css('overflow', 'auto');
31  $inner.slideUp('200');
32  $space.removeClass('isShow');
33});

CSS
1.overlayMenu {
2    position: fixed;
3    top: 0;
4    left: 0;
5    width: 100%;
6    content: '';
7    overflow: auto;
8    /* background-color: rgba(0, 0, 0, 0.5); */
9    z-index: 100000;
10  }
11
12.overlayMenu .space {
13    /* display: none; */
14    opacity: 0;
15    transition: opacity 200ms;
16    width: 100%;
17    height: 0;
18    background-color: rgba(0, 0, 0, 0.5);
19    transition: opacity 200ms ease-out, height 0ms ease-out 300ms;
20  }
21
22  .overlayMenu .space.isShow {
23    opacity: 1;
24    height: 100vh;
25    transition: opacity 200ms ease-out;
26  }