【jQuery】下記ソースが読める方解説お願いします。

###【jQuery】下記ソースが読める方解説お願いします。

こちらのスマホサイト（http://www.nico-dental.com/sp/）
の右上のボタン（ドロワーメニュー）の処理は下記で行っています。
ソースコードの概ねは理解できるのですが、for文の部分が何の働きをしているのかが、
いまいちわかりません。そもそもこちらは必要なのでしょうか？
ご存知の方いらっしゃいましたら解説お願いします。

###不明なコード

 for (var i = 1; i <= menuItem.length; i++) {
                menuItem.eq(i - 1).stop().animate({
                    'center': openPosition
                }, speedItem);
            }

###メニュー表示/非表示のコード

function menuSlide(b, t, h) {
    var btn_menu = b,
        header = $(h),
        menu = $(btn_menu),
        speedOpen = 400,
        speedClose = 600,
        speedItem = 300,
        speedDelayOpen = 300,
        speedDelayClose = 100,
        open = 'menu_open',
        close = 'current',
        openPosition = 0,
        closePosition = 0, //0 ~ -100%
        targetId = t,
        target = $(targetId),
        menuItem = target.find('li');


    menu.on('click', function() {

        if (!menu.hasClass(close)) {
            target.stop().fadeIn(speedOpen);
            menu.removeClass(open).addClass(close);
            header.removeClass(close).addClass(close);
            for (var i = 1; i <= menuItem.length; i++) {
                menuItem.eq(i - 1).stop().animate({
                    'center': openPosition
                }, speedItem);
            }
        } else {
            for (var i = 1; i <= menuItem.length; i++) {
                //console.log(-(i - 1));
                menuItem.eq(-i).stop().animate({
                    'center': closePosition
                }, speedItem);
            }
            target.stop().fadeOut(speedClose);
            menu.removeClass(close).addClass(open);
            header.removeClass(close);
        }
    });
}
menuSlide('.js_btn_gnavi', '#gNaviWrap', '#headerWrap');

以上です。
よろしくお願い致します。

kei344

2017/08/20 11:37

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

退会済みユーザー

2017/08/20 11:41

失礼しました。```にて改行を入れました。

s8_chu

2017/08/20 12:51

`'center': closePosition`とありますが、centerではなくrightではないのでしょうか？

退会済みユーザー

2017/08/21 01:33

ご指摘の通り、こちら恐らくrightですね。。。コメントありがとうございます。

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

回答2件

ベストアンサー

ご質問のコードにコメントをつけてみました。

/* menuItemの個数分ループする */
for (var i = 1; i <= menuItem.length; i++) {
  /* 現在進行中のアニメーションを中断して別のアニメーションを実行する */
  menuItem.eq(i - 1).stop().animate({
    /* center 属性を openPosition の値に変更する（アニメーション） */
    'center': openPosition`
  /* アニメーションの動作時間 */
  }, speedItem);
}

だいたい下のコードと動きは同じはずです。tは親関数menuSlideの引数です。

var menuItem = $(t).find("li");

menuItem.stop();
menuItem.animate({
  "center": 0
}, 300);

for文の部分が何の働きをしているのかが、いまいちわかりません。そもそもこちらは必要なのでしょうか？

不要かと思われます。

参考

投稿2017/08/20 15:56

編集2017/08/20 15:59

退会済みユーザー

総合スコア0

退会済みユーザー

2017/10/10 15:49

ありがとうございました。

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

製作者に聞かないと実際のところはわかりませんが、メニューアイテムを上から順番に表示して、下から順番に消したかったコードの名残だと思います。

JavaScript
1for (var i = 1; i <= menuItem.length; i++) {
2	menuItem.eq(i - 1);	// 0番目（最初）から( menuItem.length - 1 )番目（最後）まで順に処理している
3	menuItem.eq(-i);	// 最後からさ以後まで順に処理している
4}