Javascript 延迟显示：无fadeToggle[最终]部分

我正试图找到一种方法来推迟标题中提到的最后一部分

我的初始JQuery代码

var debounce = false;
var elements = document.getElementsByClassName('.Menu')
$('#Option1').click(function() {
    if (debounce == true) {return;}
    debounce = true;
    $('.Menu').each(function(index) {
        anim2($(this), index * 250, function() {
            if (index != elements.length) {return;}
            debounce = false;
        })
    })
});

这在一定程度上产生了我想要的东西，但由于延迟和显示变为无的事实，我没有得到我真正想要的东西。 GIF表示问题： 最初的淡入效果很好，但在淡出时，当第一个按钮消失时，其他按钮的延迟按钮向左移动，这是我尽量不让发生的

我试着做：

var debounce = false;
var isClicked = false;
var elements = document.getElementsByClassName('.Menu')
$('#Option1').click(function() {
    if (debounce == true) {return;}
    debounce = true;
    $('.Menu').each(function(index) {
        anim2($(this), index * 250, function() {
            if (index != elements.length) {
                if (isClicked == false) {
                    isClicked = true;
                    $('.Menu').each(function(index) {
                        $(this).css("display", "none");
                        $(this).css("opacity", "0");
                    })
                } else {
                    isClicked = false;
                    $(this).css("display", "inline-block");
                    $(this).css("opacity", "1");
                }
            }
            debounce = false;
        })
    })
});

但它不起作用，会产生bug。如果您需要了解anim2函数，它是

function anim2(object, dt, end) {
    $(object).stop().delay(dt).fadeToggle({
        duration: 1000,
        easing: "easeOutQuad",
        quene: true,
        complete: end
    })
}

只是要张贴的较少的相关部分，以防它可能是它的原因

.invisible {
    background: transparent;
    border: none;
}
.Hamburger {
    background: @pure-white;
    width: 100%;
    height: 5px;
    opacity: 0;
    position: absolute;
    .rounded
}
#Option1 {
    .invisible;
    position: absolute;
    padding: 0px 0px 0px 0px;
    top: 0px;
    left: 10px;
    height: 100%;
    width: 40px;
    #TopSpan {
        .Hamburger;
        top: 10px;
    }
    #MiddleSpan {
        .Hamburger;
        top: 20px;
    }
    #BottomSpan {
        .Hamburger;
        top: 30px;
    }
    &:active {
        background: @pure-red;
    }
}

我也签出了，但是delay（）不起作用，因为它是自动效果

HTML

Source1
Source2
Source3

以下是一个答案，不是使用javascript制作动画，而是使用CSS：

我知道这并不是您想要的，但它是更简单的代码，您应该能够将这个概念应用到您的项目中。只需对要显示/隐藏的元素使用CSS转换，并使用javascript切换它们的类

<ul>
<li>Menu</li>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>


$(document).ready(function(){
    $('li:first-child').click(function(){
     var time = 250;
    $(this).siblings().each(function(){
        var el = $(this);
         setTimeout( function(){ 
        el.toggleClass('show'); 
       }, time);
       time = time+250;
    });
  });
});

ul li:not(:first-child){
  opacity: 0;
}
ul li {
  float: left;
  padding: 10px;
  margin: 10px;
  background: #e6e6e6;
  list-style: none;
  transition: all 1s;
}
ul li.show {
  opacity: 1;
}

菜单
链接1
链接2
链接3

$（文档）.ready（函数（）{
$（'li:first child'）。单击（函数（）{
var时间=250；
$（this）.this（）.each（function（））{
var el=$（本）；
setTimeout（函数（）{
el.切换类（“显示”）；
}，时间）；
时间=时间+250；
});
});
});
ul li：不是（第一个孩子）{
不透明度：0；
}
ulli{
浮动：左；
填充：10px；
利润率：10px；
背景：#e6；
列表样式：无；
过渡：所有1；
}
ulli.show{
不透明度：1；
}

---

这是概念证明。

您打算在动画中使用jQuery吗？这可以很容易地通过不透明度和CSS转换来实现，只需使用javascript来切换一个类。您也可以提供HTML代码吗？这样做会更容易：）我真的不知道如何连接CSS和javascript，但@LeeishI添加了HTML代码@bricktopi，而这并不是你所说的我想要的答案。知道这件事还是件好事。如果没有任何其他答案，我将以此为基础，然后搜索我不理解的东西（即使有其他答案，也可能会对此进行研究），但您需要保持元素的可见性，直到所有元素都被隐藏。我可以开发另一个完整的JS解决方案，但它更混乱，CSS是动画的发展方向。当我说可见性时，我指的是CSS

visibility

属性，因为这将允许元素维护它们的空间。哦，我对JS相对较新，所以我只是将所有内容的可视性降低，并在JS中创建事件，以便我能更习惯它。如果你能制作一个，那就太棒了，但你不必。这里是所有使用动画功能的JS。你应该能够接受这些概念并使用它们。我做的主要事情是用不透明度淡出元素，然后在所有元素都淡出后隐藏它。

<ul>
<li>Menu</li>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>


$(document).ready(function(){
    $('li:first-child').click(function(){
     var time = 250;
    $(this).siblings().each(function(){
        var el = $(this);
         setTimeout( function(){ 
        el.toggleClass('show'); 
       }, time);
       time = time+250;
    });
  });
});

ul li:not(:first-child){
  opacity: 0;
}
ul li {
  float: left;
  padding: 10px;
  margin: 10px;
  background: #e6e6e6;
  list-style: none;
  transition: all 1s;
}
ul li.show {
  opacity: 1;
}