多次点击添加类

我工作创建简单的全屏菜单，它的工作很好，但有一个问题，也许用户点击按钮点击多一个（而不是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>

来源

2017-04-14 MoHamed HaSsn

如何做这个问题在不到一分钟的时间内就会得到两个upvotes，只有在看到youtube链接和youtube链接被破坏的时候，才能理解问题。 – Goose

视频是私密的。 – Draco18s

我编辑的视频和它现在的工作谢谢 –

你需要做的是添加一个标志（在这种情况下类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>

来源

2017-04-14 20:34:24

哦拍！你写了一个答案，当你完成他们暂时暂停投票违规:( –

多次点击添加类

回答

相关问题