jQueryのremoveclassに伴うフェードアウト

ハンバーガーメニューを作っています。
クラスの追加削除に伴うフェードインフェードアウトを機能させたいと思っています。
else以下で、.listのフェードインはできたのですが、前半部分での.listのフェードアウトをどのようにしたらよいでしょうか。

私自身、WEBに詳しくなく、ネット上の記事からのコードをつなぎつなぎでなんとかやっていたのですが、ここにきてどうしたらよいか分からなくなってしまいました。
拙い質問かとは思いますが、お詳しい方いらっしゃいましたら、ご教授いただけると幸いです。

Javascript
1<script type="text/javascript">
2  $(function() {
3  $(".nav-button").on("click", function() {
4    if ($(this).hasClass("active")){
5      $(this).removeClass("active");
6      $(".list")
7		.addClass("close")
8        .removeClass("open")
9    } else {
10      $(this).addClass("active");
11      $(".list")
12		.hide()
13        .addClass("open")
14        .removeClass("close")
15		.fadeIn( 200 )
16;
17    }
18  });
19});
20</script>

＜追加でHTMLとCSSのコードです。＞

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Kyoka Hatano</title>
6<meta name="viewport" content="width=device-width,initial-scale=1">
7<link rel="stylesheet" type="text/css" href="index.css">
8<script src="js/jquery.min.js" type="text/javascript"></script>
9<script type="text/javascript">
10	$(function() {
11  $(".nav-button").on("click", function() {
12    if ($(this).hasClass("active")) {
13      $(this).removeClass("active");
14      $(".list")
15        .addClass("close")
16        .removeClass("open");
17    } else {
18      $(this).addClass("active");
19      $(".list")
20        .hide()
21        .addClass("open")
22        .removeClass("close")
23		.fadeIn( 200 );
24    }
25  });
26});
27</script>
28</head>
29
30<body>
31	<div class="menu"><a class="nav-button" href="#"> <span></span> <span></span> <span></span> </a>
32		<div class="list">
33			<ul>
34				<li><a href="portraits.html">portraits</a></li>
35				<li><a href="snaps.html">snaps</a></li>
36				<li><a href="works.html">works</a></li>
37				<li><a href="contact.html">contact</a></li>
38			</ul>
39		</div>
40		<h1 id="name">Kyoka Hatano</h1>
41	</div>
42	<footer>
43			<p>&copy; 2020 Kyoka Hatano</p>
44	</footer>
45</body>
46</html>
47

CSS
1@charset "UTF-8";
2/* CSS Document */
3
4
5/*******共通*******/
6
7@font-face {
8  font-family: 'OptimaLTPro-Roman';
9  src: url('webFonts/OptimaLTPro-Roman/font.woff2') format('woff2'), url('webFonts/OptimaLTPro-Roman/font.woff') format('woff');
10}
11
12html{
13	font-size: 62.5%;
14}
15
16body{
17	background-color: #fcfcfc;
18	font-family: OptimaLTPro-Roman, san-serif;
19	color:#444;
20	margin: 0;
21}
22
23.menu{
24	margin-top: 5rem;
25	margin-left: 4.2rem;
26	position: fixed;
27}
28
29.nav-button {
30  display: none;
31}
32
33ul{
34	font-size: 1rem;
35	letter-spacing: 0.01em;
36	margin: 0;
37	padding: 0;
38}
39
40ul li{
41	list-style-type: none;
42	padding-bottom: 2.1rem;
43}
44
45a:hover {
46	color: #999;
47}
48
49.now{
50	text-decoration: underline;
51}
52
53#name{
54	writing-mode: vertical-rl;
55	font-weight: normal;
56	font-size: 1.57rem;
57	letter-spacing: 0.11em;
58	line-height: 0.9rem;
59	margin: 0;
60	padding: 0;
61}
62
63a{
64	color: #444;
65	text-decoration: none;
66}
67
68footer{
69	clear: both;
70	margin-left: 4.2rem;
71	padding: 0;
72	font-size: 1rem;
73	letter-spacing: 0.01em;
74	position: fixed;
75    bottom: 1rem;
76}
77
78
79/*******レスポンシブ*******/
80
81@media screen and (max-width:768px){
82
83	
84.menu{
85	margin: auto;
86	position: fixed;
87	width: 11.7%;
88}
89	
90.nav-button {
91  display: block;
92  cursor: pointer;
93}
94	
95.list.open {
96  display: block;
97}
98	
99.list.close {
100  display: none;
101}
102	
103  .list {
104	 
105    position: fixed;
106    left: 0;
107    top: 0;
108	 display: none;
109    z-index: 10;
110    background-color: #fcfcfc;
111    width: 100%;
112	  height: 100%;}
113    ul {
114		height: 100%;
115		width:63px;
116		margin:163px auto 0 auto;
117      position: relative;
118      overflow-x: hidden;
119      overflow-y: auto;
120		font-size: 1.3rem;
121    }
122    ul li {
123		display: block;
124	  padding-bottom: 3rem;	
125	}
126	
127.nav-button,
128  .nav-button span {
129    transition: all 0.3s;
130    box-sizing: border-box;
131  }
132  .nav-button {
133	 position: relative;
134	  margin: 2rem auto 8rem auto;
135    z-index: 20;
136    width: 24px;
137    height: 18px;
138	 transform: rotate(90deg);
139  }
140  .nav-button span {
141	  position: absolute;
142    width: 100%;
143    height: 0.2rem;
144    background-color: #ccc;
145    border-radius: 4px;
146  }
147  .nav-button span:nth-of-type(1) {
148    top: 0;
149  }
150  .nav-button span:nth-of-type(2) {
151    top: 8px;
152  }
153  .nav-button span:nth-of-type(3) {
154    bottom: 0;
155  }
156	.nav-button.active {
157		transform: none;
158	}
159	
160
161	
162#name{
163	letter-spacing: 0.11em;
164	margin: auto;
165	padding-right: 0.3rem;
166}
167
168footer{
169	margin-left: 2.4rem;
170    bottom: 0.2rem;
171}
172}

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

回答1件

ベストアンサー

※質問に HTML CSS が追記されたので、回答を全面的に変更。

CSSをみると、display の block と none の切り替えで表示/非表示にしてますが、これだとアニメーションにはなりません。まずは、これを削除します。

css
1 .list.open {
2    display: block;
3  }
4
5  .list.close {
6    display: none;
7  }

.list をフェイドイン、フェイドアウトさせるだけなら、jQuery のfadeIn fadeOut だけでOKです。

js
1$(function() {
2  $(".nav-button").on("click", function() {
3    if ($(this).hasClass("active")){
4      $(this).removeClass("active");
5      $(".list").fadeOut( 1000 );
6    } else {
7      $(this).addClass("active");
8      $(".list").fadeIn( 1000 );
9    }
10  });
11});

さらにいえば、toggleClass fadeToggle を使えばif分岐も不要です。

js
1$(function() {
2  $(".nav-button").on("click", function() {
3    $(this).toggleClass("active");
4    $(".list").fadeToggle( 1000 );
5  });
6});

投稿2020/04/20 15:45

編集2020/04/21 00:25

hatena19

総合スコア34053

flcye

2020/04/20 16:24

ご親切にありがとうございます。早速やってみたのですが、どうやら効いていないようです。全てのコードを追加しましたので、もしもよろしければ、また教えていただけると嬉しいです。何卒、よろしくお願いいたします。

flcye

2020/04/20 16:35

$(this).fadeOut('fast').queue(function() { this.remove(); }); remove()はキューに入らないため、キューに入れるには.queue()を使い、上記のようなコードを使うとできるという記事を見たのですが、どう自分のコードに組み込んで良いのか分かりませんでした。

flcye

2020/04/20 16:36

拙いコードや分かりづらい質問で申し訳ないです。

hatena19

2020/04/21 00:26

HTML CSS をみて、回答を全面的に変更しましたので、ご確認ください。

flcye

2020/04/21 01:16

ありがとうございます！試してみましたところ見事にできました。本当に助かりました。私のような初心者に親切に教えてくださり、本当にありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

jQueryのremoveclassに伴うフェードアウト

関連した質問