javascript - Multiple clicks add class -

i work on create simple fullscreen menu , it's work well, there problem maybe user click more 1 (not dblclick) on button clicks , problem in video appear:
youtbe video
need remove class when animation completed:

here 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: .3s ease .1s;      -o-transition: .3s ease .1s;      -webkit-transition: .3s ease .1s;      transition: .3s ease .1s;  }  .menu .rectangle:nth-child(2n){      -moz-transition: .3s ease .2s;      -o-transition: .3s ease .2s;      -webkit-transition: .3s ease .2s;      transition: .3s ease .2s;  }  .menu .rectangle:nth-child(3n){      -moz-transition: .3s ease .3s;      -o-transition: .3s ease .3s;      -webkit-transition: .3s ease .3s;      transition: .3s ease .3s;  }  .menu .rectangle:nth-child(4n){      -moz-transition: .3s ease .4s;      -o-transition: .3s ease .4s;      -webkit-transition: .3s ease .4s;      transition: .3s ease .4s;  }  .menu .rectangle:nth-child(5n){      -moz-transition: .3s ease .5s;      -o-transition: .3s ease .5s;      -webkit-transition: .3s ease .5s;      transition: .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>

what need add flag (in case class animating) prevent running animation while run. how prevent it:

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

next, add class if menu closed, because opening adds animation, while closing not. need remove .animating class when animation finished, setting timeout removes after x milliseconds:

if( !$('.menu').hasclass('open') ) {      $el.addclass('animating');     settimeout(function(){ $el.removeclass('animating'); }, 900); } 

here 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: .3s ease .1s;      -o-transition: .3s ease .1s;      -webkit-transition: .3s ease .1s;      transition: .3s ease .1s;  }  .menu .rectangle:nth-child(2n){      -moz-transition: .3s ease .2s;      -o-transition: .3s ease .2s;      -webkit-transition: .3s ease .2s;      transition: .3s ease .2s;  }  .menu .rectangle:nth-child(3n){      -moz-transition: .3s ease .3s;      -o-transition: .3s ease .3s;      -webkit-transition: .3s ease .3s;      transition: .3s ease .3s;  }  .menu .rectangle:nth-child(4n){      -moz-transition: .3s ease .4s;      -o-transition: .3s ease .4s;      -webkit-transition: .3s ease .4s;      transition: .3s ease .4s;  }  .menu .rectangle:nth-child(5n){      -moz-transition: .3s ease .5s;      -o-transition: .3s ease .5s;      -webkit-transition: .3s ease .5s;      transition: .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>