延遲顯示：無[最後]部分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

回答

相關問題