Multiple clicks add class

Question

I work on create simple Fullscreen menu and it's work well, but there a problem that maybe the user click more one (not dblclick) on the button clicks and this problem in the video will appear:
Youtbe video
so what I need is remove class when the animation completed:

Here my code:

$(document).ready(function () {
    $('.menu-trigger').click(function (e) {
        e.preventDefault();
        $('.menu').toggleClass('open');
        $('.menu .rectangle').removeClass('visible');
        $('.menu .rectangle').delay(100).queue(function () {
            $(this).addClass('visible').clearQueue();
        });
    });
})

html, body{
    height:100%;
}
.header{
    width:100%;
    padding:20px;
    position:fixed;
    z-index:1000;
}
.header .menu-trigger{
    width:40px;
    height:40px;
    background-color:#eaeaea;
    cursor:pointer;
    position:absolute;
    top:20px;
    left:20px;
}
.menu {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
.menu.open {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.menu .rectangle{
    width:0;
    height:20%;
    opacity:0;
    background-color:#1b1b1b;
    -moz-transition: all .3s ease .1s;
    -o-transition: all .3s ease .1s;
    -webkit-transition: all .3s ease .1s;
    transition: all .3s ease .1s;
}
.menu .rectangle:nth-child(2n){
    -moz-transition: all .3s ease .2s;
    -o-transition: all .3s ease .2s;
    -webkit-transition: all .3s ease .2s;
    transition: all .3s ease .2s;
}
.menu .rectangle:nth-child(3n){
    -moz-transition: all .3s ease .3s;
    -o-transition: all .3s ease .3s;
    -webkit-transition: all .3s ease .3s;
    transition: all .3s ease .3s;
}
.menu .rectangle:nth-child(4n){
    -moz-transition: all .3s ease .4s;
    -o-transition: all .3s ease .4s;
    -webkit-transition: all .3s ease .4s;
    transition: all .3s ease .4s;
}
.menu .rectangle:nth-child(5n){
    -moz-transition: all .3s ease .5s;
    -o-transition: all .3s ease .5s;
    -webkit-transition: all .3s ease .5s;
    transition: all .3s ease .5s;
}
.menu.open .rectangle.visible{
    width:100%;
    height:20%;
    opacity:1;
    background-color:#1b1b1b;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="header">
        <div class="menu-trigger"></div>
</header>
<nav class="menu">
    <div class="rectangle"></div>
    <div class="rectangle"></div>
    <div class="rectangle"></div>
    <div class="rectangle"></div>
    <div class="rectangle"></div>
</nav>

How did this question get two upvotes in less than a minute of the question getting asked when the only way to understand the problem is to watch the youtube link and the youtube link is broken? — Goose, Apr 14 '17 at 19:58
you don't need to open video to define where is the problem If you click more than one you will see where the problem, thank you — MoHamed HaSsn, Apr 14 '17 at 20:00
So the problem is you want to exclude double click, but allow if there's a few seconds between clicks, correct? — Goose, Apr 14 '17 at 20:01
yes, I'd like to prevent multiple clicks unless the classes added to avoid this problem, Thank you again — MoHamed HaSsn, Apr 14 '17 at 20:03
Duplicate of http://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event? Appears you just need to implement this. — Goose, Apr 14 '17 at 20:05
I don't mean by dblclick What I mean that when user click on the menu-trigger ore than one in the same time, this problem will make work bad!! — MoHamed HaSsn, Apr 14 '17 at 20:06
@MoHamedHaSsn please edit your question to clarify then, because you're problem is that you're running code on double click, and that question is asking how to "differentiate single click event and double click event?" — Goose, Apr 14 '17 at 20:06
Don't you want it to close if they click if a second time? If not, then just add a flag before the click set as false, when click set the flag as true, and only run the code if the flag is false, so you only run it once. Basically, set the code to only run once. — Goose, Apr 14 '17 at 20:08
Okay, Thank you I will edit it, Excuse me, English is not my basic language!! — MoHamed HaSsn, Apr 14 '17 at 20:08

score 1 · Answer 1 · answered Apr 14 '17 at 20:34

What you need to do is to add a flag (In this case a class animating) that will prevent running the animation while it currently run. This is how you prevent it:

if( $el.hasClass('animating') ) { 
   return; 
}

Next, you add the class if the menu is closed, because opening it adds animation, while closing does not. You need to remove the .animating class when the animation finished, by setting a timeout that removes it after X milliseconds:

if( !$('.menu').hasClass('open') ) { 
    $el.addClass('animating');
    setTimeout(function(){ $el.removeClass('animating'); }, 900);
}

Here is a working example:

$(document).ready(function () {
    $('.menu-trigger').click(function (e) {
        e.preventDefault();
        var $el = $(this);

        if( $el.hasClass('animating') ) { 
            return; 
        }
        if( !$('.menu').hasClass('open') ) { 
            $el.addClass('animating');
            setTimeout(function(){ $el.removeClass('animating'); }, 900);
        }
        $('.menu').toggleClass('open');
        $('.menu .rectangle').removeClass('visible');
        $('.menu .rectangle').delay(100).queue(function () {
            $(this).addClass('visible').clearQueue();
        });
    });
})

html, body{
    height:100%;
}
.header{
    width:100%;
    padding:20px;
    position:fixed;
    z-index:1000;
}
.header .menu-trigger{
    width:40px;
    height:40px;
    background-color:#eaeaea;
    cursor:pointer;
    position:absolute;
    top:20px;
    left:20px;
}
.menu {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
.menu.open {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.menu .rectangle{
    width:0;
    height:20%;
    opacity:0;
    background-color:#1b1b1b;
    -moz-transition: all .3s ease .1s;
    -o-transition: all .3s ease .1s;
    -webkit-transition: all .3s ease .1s;
    transition: all .3s ease .1s;
}
.menu .rectangle:nth-child(2n){
    -moz-transition: all .3s ease .2s;
    -o-transition: all .3s ease .2s;
    -webkit-transition: all .3s ease .2s;
    transition: all .3s ease .2s;
}
.menu .rectangle:nth-child(3n){
    -moz-transition: all .3s ease .3s;
    -o-transition: all .3s ease .3s;
    -webkit-transition: all .3s ease .3s;
    transition: all .3s ease .3s;
}
.menu .rectangle:nth-child(4n){
    -moz-transition: all .3s ease .4s;
    -o-transition: all .3s ease .4s;
    -webkit-transition: all .3s ease .4s;
    transition: all .3s ease .4s;
}
.menu .rectangle:nth-child(5n){
    -moz-transition: all .3s ease .5s;
    -o-transition: all .3s ease .5s;
    -webkit-transition: all .3s ease .5s;
    transition: all .3s ease .5s;
}
.menu.open .rectangle.visible{
    width:100%;
    height:20%;
    opacity:1;
    background-color:#1b1b1b;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="header">
        <div class="menu-trigger"></div>
</header>
<nav class="menu">
    <div class="rectangle"></div>
    <div class="rectangle"></div>
    <div class="rectangle"></div>
    <div class="rectangle"></div>
    <div class="rectangle"></div>
</nav>

Oh shoot! You write an answer and by the time you finish they get temporarily suspended for voting irregularities :( — Alon Eitan, Apr 14 '17 at 20:37

Multiple clicks add class

1 Answers1