多次點擊添加類

Question

我工作創建簡單的全屏菜單，它的工作很好，但有一個問題，也許用戶點擊按鈕點擊多一個（而不是dblclick）和視頻中的這個問題將出現：
Youtbe video
所以我需要的是刪除類當動畫完成：

這裏我的代碼：

$(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

你需要做的是添加一個標誌（在這種情況下類animating），這將阻止當前運行的動畫運行。這是你如何阻止它：

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

接下來，添加類如果菜單關閉，因爲打開它增加了動畫，同時關閉不。你需要通過設置超時是X毫秒後刪除它刪除.animating上課的時候動畫完成後，：

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

這裏是一個工作示例：

$(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>