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>

Answer 1

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>