Initiate fading effect on divs by clicking

I am currently in the process of developing a mobile navigation bar. I have set it up so that when the menu is clicked, it appears above it - all functioning as expected. However, I want to enhance it by adding a feature where each list item fades or slides in once clicked. Despite no errors in the console, the fade-in effect is not working. Appreciate any help.

var menu = document.getElementById("mobile-menu-link");
var mobileNav = document.getElementById("mobile-nav");
var mobileNavContent = document.getElementById("mobile-nav-content");

$(document).ready(function() {
  menu.addEventListener("click", function() {
    if (mobileNav.style.height == "0px") {
      mobileNav.style.paddingTop = "15px";
      mobileNav.style.height = "130px";
      $("#mobile-nav li").each(function(i) {
        $(this).delay(100 * i).fadeIn(500);
      });
    } else {
      mobileNav.style.height = "0px";
    }
  });
});
html,
body {
  margin: 0;
  padding: 0;
  font-size: 21px;
  min-width: 400px;
}

div {
  display: block;
}

ul {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

#desktop-navbar {
  text-transform: uppercase;
  width: 100%;
  height: 90px;
  height: 13vh;
  position: fixed;
  z-index: 1;
}

#desktop-nav-wrapper {
  height: inherit;
  padding: 0 45px;
}

#desktop-nav-wrapper nav ul {
  float: right;
  padding-top: 35px;
  font-size: 66%;
}

#desktop-nav-wrapper nav li {
  position: relative;
  display: inline-block;
  padding-left: 25px;
  color: #000000;
  font-family: Questrial;
  font-weight: 700;
}

#mobile-nav {
  overflow: hidden;
  text-align: right;
  display: block;
  width: 100%;
}

#mobile-nav li {
  font-size: 95%;
  color: #000000;
  text-decoration: none;
  font-family: Questrial;
  font-weight: 700;
  margin-right: 45px;
}

#mobile-nav li:hover {
  color: #FFFFFF;
}

#desktop-logo {
  float: left;
}

.logo {
  font-size: 140%;
  margin-top: 24px;
}

#desktop-nav-wrapper nav ul {
  padding-top: 33px;
}

#desktop-navbar {
  width: 100%;
  height: 90px;
  height: 14vh;
  position: static;
}

#desktop-navbar .desktop-items {
  display: none;
}

#desktop-navbar #mobile-menu-link {
  display: block;
  font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mobile-nav" class="sidenav" style="height: 0;">
  <div id="mobile-nav-content">
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About Me</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>

<div id="desktop-navbar">
  <div id="desktop-nav-wrapper">
    <h3 id="desktop-logo" class="logo"><a href="/">Logo </a></h3>
    <nav>
      <ul id="desktop-nav-content">
        <li id="mobile-menu-link"><a>Menu</a></li>
      </ul>
    </nav>
  </div>
</div>

javascriptjqueryhtmlcss

Answer №1

It appears that the issue with your current setup is related to the fadeIn function, which is designed to display hidden elements. In this case, your li items are not actually hidden; they are simply not visible due to the combination of overflow-hidden and a specific height set on the menu element. When using fadeIn, it overrides the initial display:none property with display:list-item and animates the opacity from 0 to 100 within the specified time frame.

To address this problem, you will need to first hide the li elements (you can achieve this by using display:none in CSS), then reveal them when needed, and finally hide them again when hiding the menu (a task that can be accomplished using jQuery).

var menu = document.getElementById("mobile-menu-link");
var mobileNav = document.getElementById("mobile-nav");
var mobileNavContent = document.getElementById("mobile-nav-content");

$(document).ready(function() {

menu.addEventListener("click", function() {
if (mobileNav.style.height == "0px") {
mobileNav.style.paddingTop = "15px";
mobileNav.style.height = "130px";
$("#mobile-nav li").each(function(i) {
$(this).delay(100 * i).fadeIn(500);
});
} else {
mobileNav.style.height = "0px";
$("#mobile-nav li").hide();

}
});
});
html,
body {
margin: 0;
padding: 0;
font-size: 21px;
min-width: 400px;
}

div {
display: block;
}

ul {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}

a {
text-decoration: none;
color: inherit;
}

#desktop-navbar {
text-transform: uppercase;
width: 100%;
height: 90px;
height: 13vh;
position: fixed;
z-index: 1;
}

#desktop-nav-wrapper {
height: inherit;
padding: 0 45px;
}

#desktop-nav-wrapper nav ul {
float: right;
padding-top: 35px;
font-size: 66%;
}

#desktop-nav-wrapper nav li {
position: relative;
display: inline-block;
padding-left: 25px;
color: #000000;
font-family: Questrial;
font-weight: 700;
}

#mobile-nav {
overflow: hidden;
text-align: right;
text-align: right;
display: block;
width: 100%;
}

#mobile-nav li {
display:none;
font-size: 95%;
color: #000000;
text-decoration: none;
font-family: Questrial;
font-weight: 700;
margin-right: 45px;
}

#mobile-nav li:hover {
color: #FFFFFF;
}

#desktop-logo {
float: left;
}

.logo {
font-size: 140%;
margin-top: 24px;
}

#desktop-nav-wrapper nav ul {
padding-top: 33px;
}

#desktop-navbar {
width: 100%;
height: 90px;
height: 14vh;
position: static;
}

#desktop-navbar .desktop-items {
display: none;
}

#desktop-navbar #mobile-menu-link {
display: block;
font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mobile-nav" class="sidenav" style="height: 0;">
<div id="mobile-nav-content">
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</div>

<div id="desktop-navbar">
<div id="desktop-nav-wrapper">
<h3 id="desktop-logo" class="logo"><a href="/">Logo </a></h3>
<nav>
<ul id="desktop-nav-content">
<li id="mobile-menu-link"><a>Menu</a></li>
</ul>
</nav>
</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

What are the steps to implementing AOP in node.js?

I am facing a challenge with implementing AOP in node.js: Imagine I have an application in a script named server.js, and I need to track its functions. Here is the code snippet: var express = require('express'); var app = express(); app.get(& ...

javascriptnode.jsaop

Seeking assistance in loading the webpage content when the button is clicked

<html> <body> <a href="samepage.php"><img src="button.png"></a> <div> //page content, database queries, calculations etc </div> </body> </html> I'm interested in loading the DIV content dynamicall ...

phpjavascriptajax

Having trouble displaying an image in p5.js on Visual Studio Code

I can't seem to figure out how to load images in visual studio code for p5.js. Can someone help me understand the process of loading images in p5.js? I've set up a new project, but the images I try to load are not displaying correctly. How can I ...

javascriptp5.js

HTML with an intricate and dynamic table layout

I am attempting to design a dynamic table that looks like the one shown in this image: https://i.stack.imgur.com/0Bmur.png The challenges I face in creating this HTML table are as follows: It needs to be dynamic as it will display data from a database T ...

jqueryhtmlangularjs

Confirmation from SimpleModal and redirecting to the original destination url

I've been searching for a solution without any luck. It seems like I might be missing something simple. What I need is a standard jQuery confirmation, like this: $('.confirm').click(function(){ var answer = confirm('Delete '+ ...

jquerysimplemodalconfirmconfirmation

Masking Aadhaar numbers

I need to find a way to detect when the back button is pressed on an input field. The methods I have tried, e.key and e.which, are returning as undefined in mobile Chrome. How can I make this work? It's functioning properly on desktop. jQuery(funct ...

javascriptjquery

What is the method to modify filterFilter so that it outputs an array of index values rather than the actual

Is there a way to utilize filterFilter functionality without creating a new array every time it runs? Instead of returning a new array, I'm looking to return an array of indexes and then retrieve the associated items in my service. This approach allow ...

javascriptangularjsangularjs-service

I'm not sure how I can retrieve the pollId from a ReactJS poll

In my React code, I am fetching a poll using an API. However, I am facing an issue while working on the handleChange function for making a POST API request. The information required for the request includes PollId, userId, and answer. I am able to retrieve ...

javascriptjavanode.jsreactjsreact-native

Stretching background images on iOS mobile devices

My background is causing issues on iOS devices by stretching only when there is content added to a page like this. However, it loads correctly on empty pages like this. I have tried adding background-attachment:scroll instead of background-size: cover to ...

ioscssimagemobilebackground

What is the behavior of a variable when it is assigned an object?

When using the post method, the application retrieves an object from the HTML form as shown below: code : app.post("/foo", (req, res)=> { const data = req.body; const itemId = req.body.id; console.log(data); console.log(itemId); }) ...

javascriptnode.jsjsonexpress

Choose a pair of outcomes when utilizing Group By in a sqlite query

Let's dive into a complex scenario with an illustration: Consider a sqlite table with various fields (id, language, title, etc.) Each title can have multiple languages associated with it. id -- language -- title -- publication -- ...

javascriptsqlsqliteselectgroup-by

Learn how to access two distinct modules through separate URLs on your server. Experience the issue of the server continuously sending the initial module's outcomes for

Hello, I am a beginner with nodeJS and I have encountered an issue. I am attempting to make separate URL requests for 2 different modules, but the server keeps sending the JSON array from the first module. How can I resolve this problem? Below is the code ...

javascriptnode.js

Tips for centering a background image:

I have been attempting to set a background image at the center, but all my efforts have failed. Here is the code I have tried: <a href="#" style="background-position:center center;"> <img src="https://firebasestorage.googleapis.com/v0/b/g ...

htmlcss

Guide to utilizing JavaScript for a basic gaming experience

Looking to incorporate multiple divs that will vanish upon being clicked, while also increasing the score by 1 through javascript. Any suggestions on how to accomplish this? ...

javascripthtmlcssonclick

The characteristics that define an object as a writable stream in nodejs

Lately, I've been delving into the world of express and mongoose with nodejs. Interestingly, I have stumbled upon some functionality that seems to work in unexpected ways. In my exploration, I noticed that when I create an aggregation query in mongoos ...

javascriptnode.jsexpressmongoose

I'm having issues with my flipclock moving too quickly and skipping over certain numbers. Any suggestions on how to resolve this issue?

My flip clock script is behaving oddly, moving too quickly and skipping over even numbers. I've been playing around with the code, and it seems like there's a problem when I use the callbacks function. var clock = $('#clock3').FlipClo ...

javascriptjqueryflipclock

To incorporate node_modules CSS into a Vue.js application that is utilizing SCSS, follow these steps

After deploying my application to AWS, I noticed that the application was rendering correctly except for the Syncfusion controls, which were not rendering correctly. Surprisingly, there were no errors shown in the Google Chrome console. On my local machine ...

cssvue.jswebpacksassej2-syncfusion

Increase the data loading capacity by implementing a feature that loads additional information as the user scrolls down the

I have created a deal and coupon website with JSON as my data source. The JSON file I am using is quite large, around 4MB. I would like to display the first 30 entries initially and then load the next 30 as the user scrolls down. Can someone guide me on ...

phpjqueryjson

Having trouble verifying credentials to access the npm.fontawesome.com registry for installing pro packages

After following the instructions in font awesome documentation, I have globally configured my host. My current setup is: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ npm config set "//npm.fontawesome.com/:_authToken" "${NPM_FONT_AW ...

javascriptnode.jsnpmfont-awesomefont-awesome-5

Concealing the resize handle icon using CSS

Consider a scenario where there is a table structure: <table> <tr> <th><div>Title1</div></th> <th><div>Title2</div></th> </tr> <tr> <td>< ...

csshtml-tableresizeresponsive