Combining various functions into a single button

I am currently working on creating a full-screen menu that functions like a modal. Everything seems to be working fine, except for the fadeOut animation. Can someone please help me understand what is causing issues with my scripts/codes? I want the content to fade in when the button is clicked and fade out when it's clicked again. Although my script successfully sets the value of "display," only the fade-in effect works smoothly. The reverse fade-out happens instantly without the 0.5s animation duration set. The button has a z-index of 101, while the menu-content has a z-index of 100, ensuring the button stays in place at all times.

Many thanks

function myMenu() {
           var x = document.getElementById("menu-content");
           if (x.style.display === "block") {
               x.style.display = "none";
           } else {
               x.style.display = "block";
           }
           if (x.style.animation === "fadeIn 0.5s ease-in-out") {
               x.style.animation = "fadeOut 0.5s ease-in-out";
           } else {
               x.style.animation = "fadeIn 0.5s ease-in-out";
           }
       }
#menu-content {
           display: none;
           position: absolute;
           height: 100%;
           width: 100%;
           background: linear-gradient(-25deg, #c0a0ae, #6f448a);
           z-index: 100;
           top: 0;
           left: 0;
           animation: fadeOut 0.5s ease-in-out;
       }

       .menu-content-properties {
           height: 100%;
           width: 100%;
           display: grid;
           grid-template-columns: auto;
           background: #000000;
           opacity: 0.5;
       }

       @keyframes fadeIn {
           from { opacity: 0; }
           to { opacity: 1; }
       }

       @keyframes fadeOut {
           from { opacity: 1; }
           to { opacity: 0; }
       }
<button id="menu-button" style="z-index: 101; position: absolute; top: 0; 
       left: 0;" onclick="myMenu();">Menu</button>
       <div id="menu-content"></div>

       <div id="menu-content">
       <div class="menu-content-properties"><br>  
           <div>1</div>
           <div></div>
           <div>2</div>
       </div>
      </div>

javascripthtmlcssanimation

Answer №1

Let's address a few issues that you may encounter.

Firstly, in your HTML code, there are 2 elements sharing the same ID (menu-content) which can lead to complications. It is advisable to remove one of them.

Secondly, when the display: none property is set in your myMenu function, the element will be immediately hidden, hence the lack of animation display.

You have a couple of options to resolve this:

  • Place the code within a setTimeout function so that the visibility isn't set to display: none until after the animation completes, OR

  • Avoid using display: none

In my opinion, it's better to avoid using display: none, as changing the animation duration would require modifications in your JavaScript code.

I have managed to make it work without needing to hide the element with display: none, by utilizing CSS transitions which provide a smoother effect.

function myMenu() {
  var x = document.getElementById("menu-content");

  if (x.classList.contains("open")) {
    x.classList.remove("open");
  } else {
    x.classList.add("open");
  }

}
#menu-content {
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(-25deg, #c0a0ae, #6f448a);
  z-index: 100;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}

#menu-content.open {
  opacity: 1;
}

.menu-content-properties {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  background: #000000;
  opacity: 0.5;
}
<button id="menu-button" style="z-index: 101; position: absolute; top: 0; 
left: 0;" onclick="myMenu();">Menu</button>

<div id="menu-content">
<div class="menu-content-properties">
<div>1</div>
<div></div>
<div>2</div>
</div>
</div>

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

The email validation function is not functioning correctly when used in conjunction with the form submission

I'm currently working on my final project for my JavaScript class. I've run into a bit of a roadblock and could use some guidance. I am trying to capture input (all code must be done in JS) for an email address and validate it. If the email is va ...

javascripthtmlformsbuttonemail-validation

Trouble with jquery/ajax form submission functionality

I followed a jQuery code for form submission that I found on various tutorial websites, but unfortunately, the ajax functionality doesn't seem to be working. When I try to submit the form, nothing happens at all. I've tried troubleshooting in eve ...

javascriptphpjqueryajaxforms

Is there a way to achieve horizontal alignment for the Twitter and Facebook buttons on my page?

By utilizing the html code provided, I successfully incorporated Twitter and Facebook "Like" buttons into my website. Initially, they were stacked vertically, which resulted in excessive use of vertical space. To optimize space usage, I decided to align th ...

javascripthtmltwitterfacebook-like

I am struggling to add a list from these nested functions in Express, but for some reason, the items are not being properly

I am currently working with three nested functions and facing an issue where the last function is not returning the desired list of items. Interestingly, when I log the results of the last function within the loop, I can see the URLs that I need. However, ...

javascriptnode.jsexpress

By pairing delay(0) with refCount(), we can achieve optimal efficiency

The refCount operator is discussed in this article. It explains the necessity of adding delay(0) to prevent unsubscription of observable A: import { Observable } from "rxjs/Observable"; const source = Observable.defer(() => Observable. ...

javascriptangulartypescriptrxjs

Tips for displaying an alert in the upcoming event loop

I recently started learning VueJS and decided to create a practice game to strengthen my understanding of the framework. http://jsfiddle.net/mzref4o0/1/ Within this game, the attack method is crucial in determining the winner: attack: function(isSpecial ...

javascriptvue.js

Graph with dynamic point addition using matplotlib animation

I have created a simple code that generates random points (x0, y0) within specified values using a while loop. After setting the coordinates for each point, the point is then displayed on an empty graph once the loop finishes. Now, I am interested in crea ...

pythonanimationmatplotlib

Is there a way to incorporate a click function into this code if the id and xpath methods are ineffective?

Check out the code snippet below: <div class="btn-group" style="margin-top: -10px; box-shadow: none !important;"> <a class="btn btn-clear store-name headerActive" style="margin-left: 0px !important;" ng-click="account();" _href="#/app ...

cssxpathselenium-webdrivercss-selectorsclassname

What are the effects of calling callback(false) and callback(true)?

I'm currently diving into a nodejs chat project, and I’m a bit confused about the outcome when callback(false) and callback(true) are triggered in this context... io.sockets.on('connection', function(socket){ socket.on('new user& ...

javascriptnode.jscallback

Is the return value a result of destructuring?

function display(): (number, string) { return {1,'my'} } The code above is displaying an error. I was hoping to use const {num, my} = print(). How can I correctly specify the return type? ...

javascripttypescript

Troubleshooting the lack of functionality with justify-items in CSS Grid

I'm facing an issue with my CSS Grid. I am attempting to set the justify-items property to start. Despite referencing the specification and watching a tutorial where it works, the property (and related ones) are not functioning as expected. In my tex ...

htmlcsscss-grid

Having trouble with Jquery CSS transform not functioning properly in Internet Explorer 8?

When it comes to utilizing CSS3 features that are not supported by older browsers such as IE8, I tend to apply them using jQuery instead. However, I have noticed that the CSS transform in jQuery does not work... Here is my code: http://codepen.io/vincentc ...

jquerycss

changing the RadioButtonList to preselect a default value

On a page, I have a pre-existing RadioButtonList where I want to make the second button checked by default instead of the first one. Since I am unable to edit the original control directly, it seems like I might need to achieve this using javascript on th ...

c#javascripthtmlradio-buttonradiobuttonlist

What is the best way to send props to a component that is exported using a Store Provider?

I'm trying to export my react component along with the redux store Provider. In order to achieve this, I've wrapped the component with an exportWithState callback. However, I'm facing an issue where I can't seem to access the props that ...

javascriptreactjsreact-props

Using VueJS to iterate through an array while applying a condition to filter out certain elements (combining v-for with v-if)

I'm currently working on a v-for loop to display two columns of card elements. The idea is to print the current element and the next one in a row if the index is even, skipping the elements with odd indexes. This is what my code looks like: <temp ...

javascriptvuejs2vue.jsv-for

Having trouble storing radio buttons and checkboxes in MySQL database using AJAX

My app is facing an issue where radio buttons and checkboxes are not correctly entering information into the database. Currently, only text fields are successfully saving data, while checkboxes and radio buttons are only recording the value of the first ra ...

javascriptphpjquerymysqlajax

PHP/CSS: Backgrounds for DIVs have been implemented, but they appear to be transparent

Update: Check out the link for some old photos here: I have a PHP file where I am creating divs with images as backgrounds using the code below (within a while-loop): echo ' <div class="pic" style="background:url('.$directory.'/'.$ ...

phpcssbackgroundinvisible

I don't understand why this error keeps popping up. It seems that there are several `InputBase` components nested within a

Issue: The error message indicates that there are multiple instances of the InputBase component within a FormControl, causing visual inconsistencies. Only one InputBase should be used. I have tried enclosing my forms within the FormControl, but the error ...

javascriptreactjsmaterial-uireact-hook-form

Having trouble implementing a circular progress bar with a custom Tailwind CSS library, the desired effect is not being achieved

I am on a mission to create a circular progress indicator. Recently, I stumbled upon the daisyui library and its component called radial progress - The documentation mentions that: "Radial progress requires the use of the --value CSS variable." ...

cssreactjstailwind-css

Developing a custom function to retrieve an array as a callback

I'm currently diving into the world of Node.js Struggling with implementing my own callback function in a certain method. It may seem like a straightforward task, but I'm finding it quite challenging to grasp. This specific function takes an ad ...

javascriptjsonnode.jsgoogle-geolocation