Question

我正在创建简单的全屏菜单并且它运行良好，但是有一个问题，即用户可能会在按钮点击上单击更多（而不是dblclick），并且会出现视频中的此问题：
Youtbe video
所以我需要的是在动画完成时删除类：

这是我的代码：

＆＃13;

$(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();
        });
    });
})

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

您需要做的是添加一个标志（在本例中为类animating），以防止在当前运行时运行动画。这就是你如何阻止它：

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

接下来，如果菜单关闭，则添加该类，因为打开它会添加动画，而关闭则不会。您需要在动画结束时删除.animating类，方法是设置在X毫秒后删除它的超时：

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

这是一个有效的例子：

＆＃13;

$(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();
        });
    });
})

＆＃13;

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;
}

＆＃13;

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

＆＃13;

多次点击添加课程

1 个答案: