ハンバーガーメニューの動作を直したい。

前提・実現したいこと

今現在、コーポレートサイトを制作しています。
スマホ対応させるためにハンバーガーメニューを付けて、各ページへ遷移させたいと考えています。
ヘッダーには左詰めでロゴ、右詰めでハンバーガーメニューがある状態です。
現在、ハンバーガーメニューは開く状態ではありますが、開く途中でロゴを避けて下グローバルメニューを伸びる状態です。
開き切ると、設置したい配置へと配置されるようになっています。このアニメーションの途中ロゴを無視して表示される状態にしたいです。

①今の状態での途中アニメーション（スクリーンショット）

②開き切った状態（ここは問題なし）

ソースコード

HTML
1~~~
2	<nav id="mainnav" class="container">
3		<div class="logo"><img src="img/logo/hoge.png"></div>
4		<p id="menuWrap"><a id="menu"><span id="menuBtn"></span></a></p>	<!-- ハンバーガー -->
5		<div class="panel">
6			<ul>
7				<li><a href="#header">サービスのご紹介</a></li>
8				<li><a href="#sec01">何かあれば</a></li>
9				<li><a href="#sec04">お問い合わせ</a></li>
10				<li><a href="#sec05">会社概要</a></li>
11			</ul>
12		</div>
13	</nav>
14~~~

JS
1~~~
2	$(nav).on('click', function(){
3		nav.removeClass('active');
4  	var $el = $(this),
5		id = $el.attr('href');
6 		$('html, body').animate({
7   		scrollTop: $(id).offset().top - headerH
8 		}, 500);
9		$(this).addClass('active');
10		if (winW < 880){
11			$('#menuWrap').next().slideToggle();
12			$('#menuBtn').removeClass('close');
13		}
14 		return false;
15	});
16~~~

css
1~~~
2/* グローバルメニュー	
3------------------------------------------------------------*/
4#mainnav {
5	height: 70px;
6	margin: 0 auto;
7	background: rgba(255,255,255,.9);
8	border-bottom: 1px solid #d1d1d1;
9	position: fixed;
10	top: 0;
11	left: 0;
12	right: 0;
13	z-index: 15;
14}
15.logo {
16	float: left;
17	width: 200px;
18}
19.logo img {
20	margin-top: 10px;
21	margin-left: 23px;
22	width: 100%;
23}
24
25.panel{
26		display: none;
27		overflow: hidden;
28}
29~~~