Question

我正试图找到一种方法来延迟标题中所述的最终部分。

我最初的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>

Answer 1

这是一个答案，不使用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;
}

这是概念证明。

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

1 个答案: