Question

这是一个应该打开和关闭我网站菜单的代码。菜单分为div，每个菜单都定时进入另一个屏幕。

    <script type="text/javascript">
        var s=0;
            function menuOpen() {
                if (s==0){
                    document.getElementById("menu_icon").src = "x.png";
                    document.getElementById("nav_menu").style.zIndex = "3";
                    $('.box-wrapper').each(function(index, element) {
                    setTimeout(function(){
                        element.classList.remove('loading');
                    }, index * 100);
                });
                s++;
                } else {
                    document.getElementById("menu_icon").src = "menu_icon.png";
                    $('.box-wrapper').each(function(index, element) {
                    setTimeout(function(){
                        element.classList.add('loading');
                    }, index * 100);

                });
                    s=0;
                    // how to make this part run after the menu has finished folding? 
                    setTimeout(function(){
                        document.getElementById("nav_menu").style.zIndex = "1";
                    }, 1500);

                }

            }


    </script>

页面内容为z-index 2.折叠时的菜单为1，打开时为3。

有没有办法在菜单完全折叠后运行命令将菜单移动到z-index 1？

目前我所做的是计时动画（1600ms）并使用setTimeout。但是如果我在菜单中添加更多行或者有人在菜单图标上快速点击，这个时间将会改变。

我对JS和Jquery很陌生，所以对我很轻松（：

感谢您的帮助。

Answer 1

您可以在下面找到jsfiddle的代码和链接。不幸的是，jsfiddle因为未知原因阻止了animate方法，所以我不进行调试，但即使它代码不起作用:)））我希望你能想到这个想法。还有一些解释。

首先我们的项目是隐藏的。 displayMenu和hideMenu有两个功能，它们是相似的，但是显示 - 运行动画从顶部看不见，而隐藏 - 从底部开始隐藏项目可见。为了防止混乱，我使用两个标志和两个类，首先openFlag说明现在应该播放什么动画。我们的隐藏和显示功能是递归的，在它们结束当前动画（隐藏或显示）后，它们会检查openFlag，然后播放下一个隐藏/显示或启动另一个隐藏/显示功能链。这是最难理解的部分）但重要的是，有了它，你可以点击任意多次，一切都会好起来，不会被点击打破。

我们用作动画链的两个类可以改变行为，我们需要选择可以显示或隐藏的项目，所以这就是为什么在每个动画之后我们只设置其中一个类并删除另一个类。

现在有一个问题，如果我们单击按钮时所有动画都结束我们应该开始新的动画链，但是如果链已经启动我们只需要切换openFlag，当当前动画停止时，它将改变行为。所以这就是btnFlag如果此时没有活动链动画则为1的原因。

在最后一次执行动画链的元素之后，它将调用callback arg，你应该传递，此时也会将btnFlag设置为0，这意味着动画链停止了。您记得的openFlag在点击时发生了变化。

function end() {
  console.log("here you can set zIndex");
}

var openFlag = 0; //become 1 after we start open elems 
var btnFlag = 1;

$(document).ready(function() {
  $('.toggleMenu').click(function() {
    if (!$('.menuBlocks').hasClass('visible')) {
      if (openFlag == 0) {
        openFlag = 1;
        if (btnFlag) {
          var items = $('.invisibleItem');
          var amount = items.length;
          displayMenu(0, amount, items, end);
        }
      }
    } else {
      openFlag = 0;
      if (btnFlag) {
        var items = $('.visibleItem');
        var amount = items.length;
        hideMenu(amount - 1, items, end);
      }
    }
  });
});

function displayMenu(i, amount, items, callback) {
  if (i < amount && openFlag) {
    items[i].animate({
      "width": "100px"
    }, 1000, function() {
      items[i].removeClass('invisibleItem');
      items[i].addClass('visibleItem');
      displayMenu(i + 1, amount, items);
    });
  } else if (!openFlag) {
              var items = $('.visibleItem');
        var amount = items.length;
        hideMenu(amount - 1, items, makeToggleVisible);
  } else {
    btnFlag = 1; //all aniimations ended
    callback();
  }
}

function hideMenu(i, items, callback) {
  if (i < 0 && openFlag) {
    items[i].animate({
      "width": "0px"
    }, 1000, function() {
      items[i].removeClass('visibleItem');
      items[i].addClass('invisibleItem');
      hideMenu(i - 1, amount, items);
    });
  } else if (!openFlag) {
        var items = $('.invisibleItem');
    var amount = items.length;
    displayMenu(0, amount, items, makeToggleVisible);
  } else {
    btnFlag = 1; //all animations are ended
    callback();
  }
}

https://jsfiddle.net/ShinShil/nrtyshv5/4/

Answer 2

好的修好了。我把所有东西都搬到了jquery。使用动画和承诺。这是最后出现的。这是一个侧面菜单，将逐个打开它的元素。

        var s=0;
        var navMenu = document.getElementById("nav_menu");
        var navBtn = document.getElementById("btn");

        $(document).ready(function(){
            $("button").click(function(){
                if (s==0) {
                navMenu.style.zIndex = "4";

                navBtn.classList.add('close');

                $('ul').each(function() {
                    $(this).children().each(function(i) {
                    $(this).delay(i * 100).animate({left:0});
                    });
                });
                    $( "li" ).promise().done(function() {
                    navMenu.style.zIndex = "4";
                    });
                    s++;
                    } 

                else {
                navBtn.classList.remove('close');
                $('ul').each(function() {
                    $(this).children().each(function(i) {
                    $(this).delay(i * 100).animate({left:"100%"});
                    });

                });
                    s=0;

                    $( "li" ).promise().done(function() {
                    navMenu.style.zIndex = "1";
                    });

                    } 

                 });
             });

Answer 3

并使用CSS过渡。

var s=0;
                function menuOpen() {
                    if (s==0){
                        document.getElementById("menu_icon").src = "x.png";
                        document.getElementById("nav_menu").style.zIndex = "3";
                        $('.box-wrapper').each(function(index, element) {
                        setTimeout(function(){
                            element.classList.remove('loading');
                        }, index * 100);
                    });
                    s++;

                         $("#last").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
                    document.getElementById("nav_menu").style.zIndex = "3";
                             });

                    } else {
                        document.getElementById("menu_icon").src = "menu_icon.png";
                        $('.box-wrapper').each(function(index, element) {
                        setTimeout(function(){
                            element.classList.add('loading');
                        }, index * 100);

                    });
                        s=0;
                    $("#last").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
                    document.getElementById("nav_menu").style.zIndex = "1";
                   $("#nav_menu").scrollTop(0);

                  });

                    }

                }

JS - 如何在函数结束时运行某些东西

3 个答案: