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

我试图找到一种方法来延迟标题中所述的最后部分。延迟显示：无[最后]部分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代表问题：https://gyazo.com/3d8f46ec3e34dfd7b88738fc00d477e1 初始淡入效果很好，但在淡出时第一个按钮消失时，其他按钮的延迟按钮向左移动，这是我试图不让发生的事情。

我试着这样做：

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; 
     }) 
    }) 
});

但它不工作，造成错误。如果您需要了解anim2功能是

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

刚准备的情况下，发布的LESS相关部分可能是它的原因

.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 of a few seconds before display:none和Hide div after a few seconds但延迟（）将无法工作，因为它是一个自动的效果

HTML

<!DOCTYPE html> 

<html lang="en"> 
<head class="Setup"> 
    <link rel="stylesheet/less" type="text/css" href="../LESS/core.less"/> 
    <script src="../JavaScript/less.js" type="text/javascript"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <script type='text/javascript' src="../JavaScript/java.js"></script> 
</head> 
<body class="Setup"> 
    <div class="Design"> 
     <div class="TopDesign"> 
      <span id="Topbar"></span> 
      <span id="Minibar"> 
       <button class="Buttons" id="Option1"> 
        <span class="Home" id="TopSpan"></span> 
        <span class="Home" id="MiddleSpan"></span> 
        <span class="Home" id="BottomSpan"></span> 
       </button> 
       <button class="Buttons Menu" id="Sub1"> 
        <p class="SubText">Source1</p> 
       </button> 
       <button class="Buttons Menu" id="Sub2"> 
        <p class="SubText">Source2</p> 
       </button> 
       <button class="Buttons Menu" id="Sub3"> 
        <p class="SubText">Source3</p> 
       </button> 
      </span> 
     </div> 
     <div class="LeftDesign"> 
      <span id="Leftbar"> 
       <img src="" alt=""> 
      </span> 
     </div> 
    </div> 
</body> 
</html>

来源

2016-04-29 Gensoki

你是否打算使用jQuery作为动画？这可以用不透明度和用CSS轻松转换来实现，只需使用javascript切换一个类即可。 – Leeish

你能否提供你的HTML代码？这将是更容易摆弄这种方式:) – Bricktop

我真的不知道如何将CSS和JavaScript互连@Leeish – Gensoki

这里不使用JavaScript的动画，但CSS的答案：

https://jsfiddle.net/7a1cpu0n/

我知道这是不是正是你想要的东西，但它是简单的代码，你应该能够将概念应用到您的项目。只需对要显示/隐藏的元素使用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; 
}

这是概念验证。

来源

2016-04-29 20:00:32 Leeish

虽然它不是我想要的，像你说的答案。这仍然是一件好事。如果没有任何其他答案，我只是将它作为基础，然后搜索我不明白的东西（即使有另一个答案，也可能会研究这个问题） – Gensoki

有，但您需要维护元素的可见性直到所有元素都被隐藏。我可以在另一个完整的JS解决方案上工作，但它更杂乱，CSS是动画方向。当我说能见度时，我的意思是CSS'visibility'属性，因为这将允许元素保持其空间。 – Leeish

哦，我对JS比较陌生，所以我只是把所有的视觉都放在了较少的位置，并且在js中制作了这些事件，这样我就可以更加习惯它了。如果你能做出一个，那将会很棒，但你不必这样做。 – Gensoki

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

回答

相关问题