1

I'm trying to find a way to delay the final part as stated in the title.

My initial JQuery code

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

This produces what I want to a certain extent but due to the delays and the fact that the display becomes none, I don't get what I truly want. GIF Representing problem : https://gyazo.com/3d8f46ec3e34dfd7b88738fc00d477e1 The initial fade in works great but on the fade out when the first button disappears the delayed buttons for the other ones shift to the left which is what I'm trying not to let happen.

I tried doing:

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

But it doesn't work and creates bugs. If you need to know the anim2 function it is

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

Just going to post the relevant parts of the LESS in case it might be the cause of it

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

I have also checked out Delay of a few seconds before display:none and Hide div after a few seconds but delay() won't work since it's an automatic effect

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>
Community
  • 1
  • 1
Gensoki
  • 133
  • 1
  • 9

1 Answers1

1

Here is an answer not using javascript for the animation but CSS:

https://jsfiddle.net/7a1cpu0n/

I know this isn't exactly what you wanted, but it's simpler code and you should be able to apply the concept to your project. Just use CSS transition on the elements you want to show/hide and use javascript to toggle their class.

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

This is proof of concept.

Leeish
  • 5,203
  • 2
  • 17
  • 45
  • While it isn't the answer I wanted like you said. It's still something good to know. If there isn't any other answers I'll just use this as a base and then search up things I don't understand(probably will study this even if there is another answer though) – Gensoki Apr 29 '16 at 20:05
  • There is, but you need to maintain the visibility of the elements until all of them are hidden. I can work on another full JS solution, but it's more messy and CSS is the direction things are going with animations. When I say visibility I mean the CSS `visibility` property as that will allow the elements to maintain their space. – Leeish Apr 29 '16 at 20:07
  • Oh I'm relatively new to JS so I was just leaving everything visual to less and making the events in js so I could get more used to it. If you could make one it would be great but you don't have to. – Gensoki Apr 29 '16 at 20:11
  • Here this is all JS https://jsfiddle.net/7a1cpu0n/1/ using the animate function. You should be able to take the concepts and use them. The main thing I did was fade the element with opacity and then hide it after all were faded out. – Leeish Apr 29 '16 at 20:22