Clicks in succession result in the addition of a class

I am currently working on creating a simple Fullscreen menu, and it functions well. However, there is an issue where the user may click on the button multiple times (not double-clicking), causing a problem where the video appears. You can view the issue in this YouTube video. Therefore, I need to remove a class once the animation is completed:

Below is my code snippet:

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

javascriptjqueryhtmlcss

Answer №1

To prevent the animation from running multiple times simultaneously, you can add a flag (such as the class animating) to check if the animation is currently in progress. Here's how you can implement this:

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

Additionally, you should add the .animating class only when the menu is closed because opening it triggers the animation, while closing does not. To remove the class once the animation is completed, set a timeout to remove it after a certain number of milliseconds:

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

See below for a functional 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Rgd: Double-Sided Horizontal Slide Control

While browsing the internet, I came across several examples of horizontal sliders with adjustable values. For example, if I set the maximum value as 100 and move the slider 10 sectors to the left, each sector would decrease by 10. What I am trying to ach ...

javascriptjqueryhtmlcss

What is the best way to group Angular $http.get() requests for efficiency?

My challenge involves a controller that must retrieve two distinct REST resources to populate two dropdowns. I want to ensure that neither dropdown is populated until both $http.get() calls have completed, so that the options are displayed simultaneously r ...

javascriptangularjs

Updating the HTML markup within ASP.NET on the server side

When the html file loads, I need to change a specific string within it. Here is an example of the html file: <html> <head> <title>MyTitle</title></head> <body> Some Text <script type='text/javascript'> / ...

c#asp.nethtmlstring

Guide on activating javascript code for form validation using php

How can I activate JavaScript code for form validation? I am currently implementing form validation on a combined login/register form where the login form is initially displayed and the register form becomes visible when a user clicks a button, triggering ...

javascriptphphtmlcss

Leveraging AJAX for transmitting form information to a php script without relying on jQuery

I want to explore AJAX by implementing a basic form data submission to a php script and database. For educational purposes, I've reached a standstill after hitting the "Create Profile" button with no action. Could someone spot any syntax or structural ...

javascriptphpajaxmysqli

Navigating through a custom drop-down using Selenium WebDriver: Identifying elements within DIV, UL, and LI

I need assistance automating a custom drop-down field that consists of DIV, UL, and LI elements. Select class or CSSSelector are not viable options due to the dynamic nature of the field. <div id="boundlist-1092" class="x-boundlist x-boundlist-floa ...

htmlcssseleniumselenium-webdrivercss-selectors

placeholder text in a text input field

There is a MySQL table with two fields (num and name) where I need to insert numerous names, each accompanied by a number as shown below. The PHP code on "page 2" should automatically insert the next number after the last one if only the name is entered wi ...

phphtmlmysql

Why Does Angular's ngIf Always Result in a Negation to True?

Can someone please clarify this for me? I'm having trouble understanding why the *ngIf condition and else statement always evaluate to true unless I am completely mistaken. Here is the situation: I have an icon that should turn the background color t ...

javascriptangular

Ways to incorporate additional fields into your html/php form

Is there a way to increase the number of fields in my basic form? I want to include fields like username, email, subject, and more. Just looking to add additional fields to the form. <!DOCTYPE html> <html> <head> <title>Storing Fo ...

phphtmlforms

What are the types used for req and res in the Express framework?

Here in this demonstration I am trying to implement the DefinitelyTyped Response and Request types for the req, res parameters. However, I encounter a compilation error: const express = require('express'); const app = express(); app.get('/& ...

javascriptnode.jstypescriptrestexpress

Is it possible to replicate the zoom text feature found in mobile browsers using selenium?

My automation script, which utilizes Selenium and Java on Sauce Labs, is presenting a challenge. I am struggling to find a JavaScript method or keyboard shortcut that can programmatically enable the 'Zoom text' function. Any advice or suggestions ...

javascriptselenium-webdrivermobile-safarisaucelabsmobile-browser

Customizing the toString Method in a TypeScript Class for JavaScript Objects

I've been struggling with a particular issue for the past few days and I just can't seem to find a solution anywhere. Context: I currently have a TypeScript class that is defined like this: export class Client extends Person { claimNumber: s ...

javascriptangulartypescript

Is there a way to have only the <a> tag be clickable in an unordered list, without making the entire list item clickable?

I just need the text to be made clickable instead of the entire list item block. <a class="menu_head">Hello</a> <ul class="menu_body"> <li><a href="#">Sub-menu 1</a></li> <li><a href="#">Sub-menu 2 ...

htmlcss

What is the process for exporting/importing a variable in Node.js?

What is the correct way to export/import a variable in Node.js? I attempted to use export and import methods, but I received an error message stating that it should be a module. After changing the type to module in the JSON file, it then told me that requ ...

javascriptnode.jsvariablesimportexport

Comparison between jQuery animation plugins implemented in the HEAD section and those implemented in

When performing various tasks, we often rely on external jQuery plugins in the head section and execute actions like $(document).ready. However, there is a CMS that already includes jQuery properly in the head section, restricting us from adding anything t ...

jqueryheader

Ways to position bootstrap 4 navigation below header on desktop and above on mobile devices

In my bootstrap 4 grid layout, the first row consists of only a heading. The second row includes a vertical nav that I want to keep aligned with the content by placing it in the same row. However, on desktop only, I would like the heading to appear above t ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Display the data received from the client on the NodeJS server

I have a basic html file that includes the following snippet of javascript: <script type="text/javascript"> $.ajax({ url: 'http://192.168.X.X:8080', data: '{"data": "1"}', dataType: ...

javascriptnode.jsget

Tips for navigating to a different route during the ngOnInit lifecycle event

How can I automatically redirect users to a specific page when they paste a URL directly into the browser? I would like users to be directed to the /en/sell page when they enter this URL: http://localhost:3000/en/sell/confirmation Below is the code I am ...

javascriptangulartypescript

What is the best method for interpreting XML using JavaScript?

I am facing a challenge with fetching and parsing an XML file using JavaScript. The XML-file is beyond my control. Recently, there has been a change in the encoding of some XML files which prevents the code from being parsed successfully. Previously it wa ...

javascriptxmlunicode

What could have caused the textbox to not show up?

<html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <title>Dynamic Creation of Div Elements Using Javascript< ...

javascriptjqueryhtml