JQuery slideUpの速さを変更する

前提・実現したいこと

サイトの模写をしています。
ハンバーガーメニューのslideUpの速さをslideDownに合わせたいです。

発生している問題・エラーメッセージ

ハンバーガーメニューを作成する際に、JQueryのslideDown(300)/slideUp(300)
を指定していますが、なぜかslideUpの速さだけ変わりません。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="style.css">
7    <title>Wordpress</title>
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
9    <script type="text/javascript">    
10        jQuery(function ($) {
11          $(function () {
12            $(".menu-open").on("click", function () {
13              if ($(this).hasClass("menu-close")) {
14                $(this).removeClass("menu-close");
15                $(".h-menu").removeClass("open").slideDown(300);
16              } else {
17                $(this).addClass("menu-close");
18                $(".h-menu").slideUp(300).addClass("open");
19              }
20            });
21          });
22        }); 
23        </script>    
24</head>
25<body>
26<!-- header -->
27<header class="header">
28<nav class="header-inner">
29<h1 class="header-logo"><a class="header-btn" href="">LOGO</a></h1>
30
31<!-- gnav -->
32<ul class="gnav-list">
33<li class="gnav-items"><a class="gnav-item">GNAV<p>ナビ</p></a></li>
34<li class="gnav-items"><a class="gnav-item">GNAV<p>ナビ</p></a></li>
35<li class="gnav-items"><a class="gnav-item">GNAV<p>ナビ</p></a></li>
36<li class="gnav-items gnav-items-menu"><a class="gnav-item">GNAV<p>ナビ</p></a>
37<ul class="gnav-item-list">
38    <li><a href="">› ナビ</a></li>
39    <li><a href="">› ナビ</a></li>
40    <li><a href="">› ナビ</a></li>
41    <li><a href="">› ナビ</a></li>
42    <li><a href="">› ナビ</a></li>
43</ul>
44</li>
45<li class="gnav-items"><a class="gnav-item">GNAV<p>ナビ</p></a></li>
46<li class="gnav-items"><a class="gnav-item">GNAV<p>ナビ</p></a></li>
47<li class="gnav-items"><a class="gnav-item">GNAV<p>ナビ</p></a></li>
48</ul><!-- /gnav -->
49
50<!-- menu -->
51<div class="menu-open menu-close">
52        <span></span>
53</div>
54</nav>
55</header><!-- /header -->
56
57<div class="h-menu open">
58    <ul class="h-menu-list">
59        <li class="h-menu-item"><a class="h-menu-items">メニュー</a></li>
60        <li class="h-menu-item"><a class="h-menu-items">メニュー</a></li>
61        <li class="h-menu-item"><a class="h-menu-items">メニュー</a></li>
62        <li class="h-menu-item"><a class="h-menu-items">メニュー</a></li>
63        <li class="h-menu-item"><a class="h-menu-items">メニュー</a></li>
64    </ul>
65    <p class="h-menu-btn">メニュー</p>
66    <ul class="h-menu-list">
67        <li class="h-menu-item"><a class="h-menu-items">メニュー</a></li>
68        <li class="h-menu-item"><a class="h-menu-items">メニュー</a></li>
69        <li class="h-menu-item"><a class="h-menu-items">メニュー</a></li>
70        <li class="h-menu-item"><a class="h-menu-items">メニュー</a></li>
71        <li class="h-menu-item"><a class="h-menu-items">メニュー</a></li>
72    </ul>
73    <p class="h-menu-btn">メニュー</p>
74    <ul class="h-menu-list">
75        <li class="h-menu-item"><a class="h-menu-items">メニュー</a></li>
76        <li class="h-menu-item"><a class="h-menu-items">メニュー</a></li>
77        <li class="h-menu-item"><a class="h-menu-items">メニュー</a></li>
78        <li class="h-menu-item"><a class="h-menu-items">メニュー</a></li>
79    </ul>
80    <a class="h-menu-close"><span>閉じる</span></a>
81</div>

css
1html {
2  font-size: 62.5%;
3}
4
5body {
6  margin: 0;
7  padding: 0;
8  font-size: 100%;
9  height: 100%;
10}
11
12.header {
13  z-index: 999;
14  position: fixed;
15  box-sizing: border-box;
16  top: 0;
17  background: #fff;
18  width: 100%;
19}
20
21.header::after {
22  content: '';
23  position: absolute;
24}
25
26.header-inner {
27  max-width: 1280px;
28  padding: 0 20px;
29  margin: 0 auto;
30  box-sizing: border-box;
31}
32
33.header-logo {
34  display: inline-block;
35  margin: 0;
36}
37
38.header-btn {
39  font-size: 32px;
40  letter-spacing: 4px;
41  margin: 0;
42  padding-top: 0px;
43  display: block;
44  font-weight: 800;
45  font-family: 'Montserrat', sans-serif;
46  color: #222;
47  line-height: 80px;
48  box-sizing: border-box;
49  height: 80px;
50  cursor: pointer;
51  text-decoration: none;
52}
53
54.gnav-list {
55  display: flex;
56  justify-content: space-between;
57  align-items: center;
58  float: right;
59  list-style: none;
60  padding: 0;
61  margin: 0;
62}
63
64.gnav-items {
65  margin: 0;
66  float: left;
67  height: 80px;
68  padding-top: 9px;
69  color: #282828;
70  box-sizing: border-box;
71  font-size: 1.6rem;
72}
73
74.gnav-items-menu {
75  position: relative;
76}
77
78.gnav-items-menu:hover .gnav-item-list {
79  opacity: 1;
80  top: 80px;
81  visibility: visible;
82}
83
84.gnav-item {
85  display: block;
86  margin: 0;
87  padding: 14px 0 6px;
88  box-sizing: border-box;
89  width: 130px;
90  font-size: 1.6rem;
91  font-weight: bold;
92  text-align: center;
93  position: relative;
94}
95
96.gnav-item p {
97  margin: 0;
98  font-size: 13px;
99  font-weight: 500;
100  letter-spacing: 0;
101  color: #666;
102  line-height: 1;
103}
104
105.gnav-item-list {
106  list-style: none;
107  position: absolute;
108  top: 50px;
109  background: #fff;
110  height: auto;
111  width: 190px;
112  padding: 0 0 26px;
113  border-radius: 0 0 6px 6px;
114  border: 2px solid #9dce54;
115  border-top: none;
116  box-sizing: border-box;
117  transition: all .3s;
118  opacity: 0;
119  z-index: 1;
120  margin: 0;
121  list-style: none;
122  visibility: hidden;
123}
124
125.gnav-item-list a {
126  font-size: 15px;
127  color: #333;
128  line-height: 42px;
129  height: 42px;
130  padding-left: 26px;
131  text-align: left;
132  font-weight: 600;
133  display: block;
134  letter-spacing: 0.2px;
135  box-sizing: border-box;
136  cursor: pointer;
137  text-decoration: none;
138}
139
140.h-menu {
141  display: block;
142  background: #fff;
143  height: 100%;
144  width: 100%;
145  padding: 70px 0 0;
146  overflow: auto;
147  text-align: center;
148  position: fixed;
149  left: 0;
150  top: 0;
151  z-index: 990;
152  transform: translateY(0);
153  transition-duration: 0.3s;
154  transition-property: transform;
155}
156
157.h-menu-list {
158  display: flex;
159  flex-wrap: wrap;
160  list-style: none;
161  box-sizing: border-box;
162  text-align: center;
163  margin: 0;
164  padding: 0;
165}
166
167.h-menu-item {
168  width: 50%;
169  border-right: 1px solid #67c624;
170  border-bottom: 1px solid #67c624;
171  font-size: 1.6rem;
172  box-sizing: border-box;
173}
174
175.h-menu-items {
176  width: 100%;
177  display: block;
178  line-height: 2.5;
179  font-size: 15px;
180}
181
182.h-menu-btn {
183  color: #fff;
184  background: #67c624;
185  line-height: 2.0;
186  margin-top: -1px;
187  font-size: 1.6rem;
188  text-align: center;
189}
190
191.h-menu-close {
192  width: 100%;
193  line-height: 3;
194  transition: background-color 0.9s;
195  font-size: 1.6rem;
196  cursor: pointer;
197}
198
199.h-menu-close span {
200  padding: 0 0 0 20px;
201  position: relative;
202}
203
204.h-menu-close span:before {
205  content: "";
206  background: #000;
207  width: 16px;
208  height: 2px;
209  box-sizing: border-box;
210  display: block;
211  position: absolute;
212  bottom: 8px;
213  left: 0;
214  transform: rotate(135deg);
215}
216
217.h-menu-close span:after {
218  content: "";
219  background: #000;
220  width: 16px;
221  height: 2px;
222  box-sizing: border-box;
223  display: block;
224  position: absolute;
225  bottom: 8px;
226  left: 0;
227  transform: rotate(225deg);
228}
229
230.open {
231  display: none;
232}
233
234
235@media screen and (max-width: 990px) {
236  .header-logo {
237    text-align: center;
238    display: block;
239    float: none;
240  }
241  .header-btn {
242    font-size: 3.0rem;
243    margin: 18px auto 14px;
244    height: 36px;
245    line-height: 36px;
246    letter-spacing: 3px;
247  }
248  .menu-open {
249    position: absolute;
250    top: 0;
251    right: 0;
252    width: 70px;
253    height: 70px;
254    display: block;
255  }
256  .menu-open span {
257    background: transparent;
258    width: 32px;
259    height: 3px;
260    margin: auto;
261    display: inline-block;
262    position: absolute;
263    top: 0;
264    right: 0;
265    bottom: 0;
266    left: 0;
267    transition: background-color 0.9s;
268  }
269  .menu-open span::before {
270    top: 0px;
271    content: '';
272    background: #000;
273    width: 100%;
274    height: 100%;
275    position: absolute;
276    right: 0;
277    transform: rotate(135deg);
278    transition: transform .3s, top .3s, background-color 0s;
279  }
280  .menu-open span::after {
281    top: 0px;
282    content: '';
283    background: #000;
284    width: 100%;
285    height: 100%;
286    position: absolute;
287    right: 0;
288    transform: rotate(225deg);
289    transition: transform .3s, top .3s, background-color 0s;
290  }
291  .menu-close span {
292    background: #000;
293  }
294  .menu-close span::before {
295    top: -9px;
296    transform: none;
297  }
298  .menu-close span::after {
299    top: 9px;
300    transform: none;
301  }
302  .gnav-list {
303    display: none;
304  }
305  .h-menu {
306    background: #fff;
307    height: 100%;
308    width: 100%;
309    padding: 70px 0 0;
310    overflow: auto;
311    position: fixed;
312    left: 0;
313    top: 0;
314    z-index: 990;
315    transition-property: transform;
316    transition-duration: 0.3s;
317  }

試したこと

slideUpの速さを100,200,300…と変えていきましたが、600まで速さが変わらなかったです。
また、変数に"fast"や"slow"を入れてみましたが、遅すぎたり、速すぎたりで自分の思い通りには行かなかったです。
h-menuのtransition-durationを変更しても、効果がありませんでした。

説明下手で申し訳ありませんが、どなたかご教授いただければ幸いです。

補足情報（FW/ツールのバージョンなど）

模写サイト
https://galera.co.jp/#0

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

回答1件

ベストアンサー

.removeClass("open") .addClass("open") が不要では。
当然下記のCSSも。

css
1.open {
2  display: none;
3}

JQueryの slideDown slideUp で display: none; の切り替えもしてくれます。

js
1        jQuery(function ($) {
2          $(function () {
3            $(".menu-open").on("click", function () {
4              if ($(this).hasClass("menu-close")) {
5                $(this).removeClass("menu-close");
6                $(".h-menu").slideDown(300);
7              } else {
8                $(this).addClass("menu-close");
9                $(".h-menu").slideUp(300);
10              }
11            });
12          });
13        });