ハンバーガーメニューを開いたタイミングでナビを順番に表示させたい

ボタンクリックで左からメニューが表示するサイトを作成しております。
ライブラリは下記のものを使用しております。
http://git.blivesta.com/drawer/

こちらのメニューを開いたタイミングでナビが上から順番に表示する仕様を作成したいです。

現状で、フェードインするところまでは実装できたのですが、
メニューを再度開くとランダムに表示されてしまうなど挙動がおかしくなってしまいます。

そもそも記述が間違っているのでしょうか？

初歩的な質問で申し訳ありませんが、ご教示いただけると幸いです。

よろしくお願いいたします。

html
1
2<header>
3
4  <button id="button" type="button" class="drawer-toggle drawer-hamburger">
5    <span class="drawer-hamburger-icon"></span>
6  </button>
7
8  <nav class="drawer-nav" role="navigation">
9    <ul class="drawer-menu fade">
10      <li><a class="drawer-menu-item" href="#">menu01</a></li>
11      <li><a class="drawer-menu-item" href="#">menu02</a></li>
12      <li><a class="drawer-menu-item" href="#">menu03</a></li>
13      <li><a class="drawer-menu-item" href="#">menu04</a></li>
14      <li><a class="drawer-menu-item" href="#">menu05</a></li>
15      <li><a class="drawer-menu-item" href="#">menu06</a></li>
16    </ul>
17  </nav>
18</header>
19

js
1
2$(function() {
3
4	$('#button').click(function(){
5		$('.fade li').hide();
6		$('.fade li').each(function(i) {
7			$(this).delay(500 * i).fadeIn(1000);
8		});
9	});
10
11});
12
13

退会済みユーザー

2019/02/24 23:38

「メニューを再度開くと」というのは、全てのナビメニューがフェードインで表示し切った後なのか、それとも全てのメニューがフェードインで表示し切る前にメニューを閉じて再度開いたということなのか、もう少し現象を詳しく記載していただけますか。

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

回答2件

each()ではなくfor()を使えば順番通りになるのではと思います。

jQuery
1$(function() {
2    $('#button').click(function(){
3        $('.fade li').hide();
4        var cnt = $('.fade li').length;
5        for (i = 0; i < cnt; i ++) {
6            $('.fade li').eq(i).delay(500 * i).fadeIn(1000);
7	    }
8    });
9});